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}},具体样式的约束请参考文档
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没有正确生成或生成路径错误,参考这篇文章解决,除此之外,项目代码有错误也有可能导致闪退

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

被折叠的 条评论
为什么被折叠?



