了解react native 从github开始：
https://github.com/facebook/react-native
RNTester 是个demo 项目，可以看到 react-native 的很多视图组件。
本文是个记录坎坷的过程。
1.检查本地环境变量
我的是mac,操作都是关于mac下的
a.查看我的环境变量
cat ~/.bash_profile
b.修改环境变量
vi ~/.bash_profile
c.修改内容，确保有 ANDROID_HOME, ANDROID_SDK 这两个变量都指向你的android sdk下载后的解压目录，我的是这样的:
export ANDROID_HOME=/Users/zhangyunfei/chengxu/android-sdk
export ANDROID_SDK=/Users/zhangyunfei/chengxu/android-sdk
export PATH=$PATH:$ANDROID_SDK/platform-tools
export PATH=$PATH:$ANDROID_SDK/tools
export PATH=$PATH:$ANDROID_SDK/tools/bin
d.修改内容，确保有 ANDROID_NDK 这个变量，我的是这样的:
export ANDROID_NDK=/Users/zhangyunfei/chengxu/android-ndk
export PATH=$PATH:$ANDROID_NDK
e.检查你的android sdk版本，尽量新。检查ndk的到最新版本，太老的版本会编译失败
2.将项目克隆到本地
git clone https://github.com/facebook/react-native.git
cd react-native
npm install
3.执行编译
cd react-native
./gradlew :RNTester:android:app:installDebug
./scripts/packager.sh
注意：最后这条指令，packager它打开一个server，app通过这个server下载到 index.js 以在手机显示。这个debug时非常有用。
4.遇到坑
遇到： 找不到 @babel/runtime， 错误提示信息如下：
error: bundling failed: Error: Unable to resolve module `@babel/runtime/helpers/interopRequireDefault` from `/Users/zhangyunfei/Downloads/demo1/react-native/RNTester/js/RNTesterApp.android.js`: Module `@babel/runtime/helpers/interopRequireDefault` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
at ModuleResolver.resolveDependency (/Users/zhangyunfei/Downloads/demo1/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:1301)
at ResolutionRequest.resolveDependency (/Users/zhangyunfei/Downloads/demo1/react-native/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)
at DependencyGraph.resolveDependency (/Users/zhangyunfei/Downloads/demo1/react-native/node_modules/metro/src/node-haste/DependencyGraph.js:238:485)
at Object.resolve (/Users/zhangyunfei/Downloads/demo1/react-native/node_modules/metro/src/lib/transformHelpers.js:180:25)
at dependencies.map.result (/Users/zhangyunfei/Downloads/demo1/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:311:29)
at Array.map (<anonymous>)
at resolveDependencies (/Users/zhangyunfei/Downloads/demo1/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:307:16)
at /Users/zhangyunfei/Downloads/demo1/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:164:33
at Generator.next (<anonymous>)
at step (/Users/zhangyunfei/Downloads/demo1/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:266:307)
解决方法，装上就好了：
npm add @babel/runtime
5.遇到白屏显示？检查后发现，同时只能运行一个设备。比如运行了虚拟机，那先关掉一个。然后执行一个通过adb的 ip的映射。
adb reverse tcp:8081 tcp:8081
