Android 编译react native示例项目RNTester

了解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