taro 编译React-Native安卓端流程

本是古典何须时尚 2023-08-17 17:11 115阅读 0赞

**1 . 根据[官网文档][Link 1]，安装并配置`Node、Watchman、react-native cli、Android Studio`工具**

**2 . 新增环境变量`ANDROID_HOME` 、`PATH`路径**

**3 . 在Android Studio创建模拟器**

**4 . 在项目根目录下运行`npm run dev:rn`编译代码至RN，若出现style相关的错误，则是因为你的代码不符合RN端的约束，导致编译失败，例如内联样式`style="width:20;margin-right:10"`要写成RN支持的形式`style={ {width:20,marginRight:10}}`，具体样式的约束请参考[文档][Link 2]**

**5 . 编译完成若未自动打开浏览器，则在项目根目录下手动运行`react-native start`启动Metro Bundler Server, 若8081端口被占有，则加入`--port = 端口号`指定端口，打开浏览器，访问`http://127.0.0.1:8081`，可以看到画面。打开`http://127.0.0.1:8081/rn_temp/index.bundle?platform=ios&dev=true`，则开始打包**

**6 . 官网上可以自己整合RN到原生应用，也可以使用官方的[壳子][Link 3]，使用壳子时，若出现错误，需要更新npm包到如下[版本][Link 4]**

**7 . 若`react-native start`时更改过运行端口`port`，那么模拟器的请求端口也需要做对应的[修改][Link 5]**

**8 . 当debug模式正常，打包apk安装到真机后闪退问题，可能是index.android.bundle没有正确生成或生成路径错误，参考这篇[文章][Link 6]解决，除此之外，项目代码有错误也有可能导致闪退**

--------------------

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]

[Link 1]: https://nervjs.github.io/taro/docs/react-native.html
[Link 2]: https://nervjs.github.io/taro/docs/before-dev-remind.html#react-native
[Link 3]: https://github.com/NervJS/taro-native-shell
[Link 4]: https://github.com/NervJS/taro-native-shell/issues/12
[Link 5]: https://reactnative.cn/docs/running-on-device/
[Link 6]: https://medium.com/@adityasingh_32512/solved-unable-to-load-script-from-assets-index-android-bundle-bdc5e3a3d5ff
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: /images/20230808/baeaaa2843884a7a8071bb302b0b2ccb.png