ReactNative快速打包详解

shuye1015
165 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第23天，点击查看活动详情

ReactNative快速打包

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

npm config set registry registry.npm.taobao.org --global npm config set disturl 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

Weex快速打包

  1. 安装依赖:Weex 官方提供了 weex-toolkit 的脚手架工具来辅助开发和调试。首先，你需要最新稳定版的 Node.js 和 Weex CLi。
  2. 运行npm install -g weex-toolkit安装Weex 官方提供的 weex-toolkit 脚手架工具到全局环境中
  3. 运行weex create project-name初始化Weex项目
  4. 进入到项目的根目录中，打开cmd窗口，运行weex platform add android安装android模板，首次安装模板时，等待时间较长，建议fq安装模板
  5. 打开android studio中的安卓模拟器，或者将启用USB调试的真机连接到电脑上，运行weex run android，打包部署weex项目
  6. 部署完成，查看项目效果
avatar
文章
阅读
粉丝