美文网首页程序员
Android 编译react native示例项目RNTest

Android 编译react native示例项目RNTest

作者: 张云飞Vir | 来源:发表于2018-09-26 17:40 被阅读511次

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

    相关文章

      网友评论

        本文标题:Android 编译react native示例项目RNTest

        本文链接:https://www.haomeiwen.com/subject/ocljoftx.html