react-native快速打包app项目 - 前端笔记-安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别! npm conf...

学习笔记

点滴记忆
回忆过往
首页>> web前端 >>react-native快速打包app项目 - 前端笔记
2020-2-24
分类: web前端

react-native快速打包app项目

文章作者:痴迷

安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别! ......

  1. 安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

  1. Yarn、React Native的命令行工具(react-native-cli)
  • Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

  1. 运行react-native init AwesomeProject创建React-Native项目
  2. 运行cd AwesomeProject切换到项目根目录中,运行adb devices来确保有设备连接到了电脑上
  3. 运行react-native run-android打包编译安卓项目,并部署到模拟器或开发机中
  4. 运行上一条命令之前,要确保有设备连接到了电脑上,可以运行adb devices查看当前接入的设备列表,打包好的文件,放到了android\app\build\outputs\apk目录下
  5. 入坑指南

问题1:开启悬浮框权限;
问题2:Could not get BatchedBridge, make sure your bundle is packaged correctly
解决方案:在终端中,进入到项目的根目录,执行下面这段命令行:
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
运行之前,需要确保android/app/src/main/目录下有assets文件夹,如果没有,手动创建之~,再运行上面的命令;
问题3:could not connect to development server
解决方案:晃动手机,唤起设置属性窗口,点击“Dev settings”,再点击Debuug server host 出现设置ip地址窗口,填写Ip地址和端口号8081,例如`192.168.1.111:8081


×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » react-native快速打包app项目

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)