前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android 编译react native示例项目RNTester

Android 编译react native示例项目RNTester

作者头像
张云飞Vir
发布2020-03-16 16:13:59
1.4K0
发布2020-03-16 16:13:59
举报
文章被收录于专栏:写代码和思考写代码和思考

了解react native 从github开始:

代码语言:javascript
复制
  https://github.com/facebook/react-native

RNTester 是个demo 项目,可以看到 react-native 的很多视图组件。

本文是个记录坎坷的过程。

1.检查本地环境变量 我的是mac,操作都是关于mac下的

代码语言:javascript
复制
    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.将项目克隆到本地

代码语言:javascript
复制
git clone https://github.com/facebook/react-native.git
cd react-native
npm install

3.执行编译

代码语言:javascript
复制
cd react-native
./gradlew :RNTester:android:app:installDebug
./scripts/packager.sh
注意:最后这条指令,packager它打开一个server,app通过这个server下载到 index.js 以在手机显示。这个debug时非常有用。

4.遇到坑

代码语言:javascript
复制
  遇到:    找不到 @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的映射。

代码语言:javascript
复制
  adb reverse tcp:8081 tcp:8081
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档