taro 编译React-Native安卓端流程

本文详细介绍了React Native开发环境的搭建步骤,包括安装配置Node、Watchman、react-native-cli、Android Studio等工具,设置环境变量,创建模拟器,以及代码编译和调试过程。同时,针对样式编译错误、端口冲突、真机闪退等问题提供了解决方案。

1 . 根据官网文档,安装并配置Node、Watchman、react-native cli、Android Studio工具

2 . 新增环境变量ANDROID_HOMEPATH路径

3 . 在Android Studio创建模拟器

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

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到原生应用,也可以使用官方的壳子,使用壳子时,若出现错误,需要更新npm包到如下版本

7 . 若react-native start时更改过运行端口port,那么模拟器的请求端口也需要做对应的修改

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


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

在这里插入图片描述

D:\project\SmallProgram\myApp>yarn dev:rn yarn run v1.22.22 $ npm run build:rn -- --watch > myApp@1.0.0 build:rn > taro build --type rn --watch 👽 Taro v4.1.1 Tips: 预览模式生成的文件较大,设置 NODE_ENV 为 production 可以开启压缩。 Example: $ set NODE_ENV=production && taro build --type rn --watch Installing React-Native related packages: react@^18.2.0 react-dom@^18.2.0 react-native@^0.73.1 @react-native/metro-config@^0.73.2 expo@~50.0.2 @tarojs/taro-rn @tarojs/components-rn @tarojs/rn-runner @tarojs/rn-supporter @tarojs/runtime-rn React-Native related packages have been installed successfully. ATTEHNTION: Package.json has been modified automatically, please submit it by yourself. index.js created WARNING: You should run npx react-native@latest to ensure you're always using the most current version of the CLI. NPX has cached version (0.73.11) != current release (0.79.3) info Welcome to React Native v0.73 info Starting dev server on port 8081... To print qrcode press "q" Welcome to Metro v0.80.12 Fast - Scalable - Integrated info React Native v0.79.3 is now available (your project is running on v0.73.11). info Changelog: https://github.com/facebook/react-native/releases/tag/v0.79.3 info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.79.3 info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows". info Dev server ready i - run on iOS a - run on Android d - open Dev Menu r - reload app info Opening app on Android... info A dev server is already running for this project on port 8081.
06-06
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值