RN开发环境搭建和Demo项目部署
- 安装 Node.js
- 新版可能不支持npm,找个支持的版本
- 设置 npm 镜像
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
- 安装React-Native
- 在react-native目录下,执行
npm install -g react-native-cli
安装
- 在react-native目录下,执行
- 初始化项目:
react-native init project_name
- 很慢,可能报错。多次执行直到成功
Rreat-Native项目文件结构和作用介绍
- index.js:项目入口文件
- package.json:相关依赖库及其版本号,
- package-lock.json:当 node_modules 或 package.json 发生变化时会自动生成。
- app.js:类似资源文件
- node_modules:React-Native依赖文件,提供类似FlatList.js的很多功能支持
参考文档:npmjs.com
React-Native 调试方法
- 在手机端调出菜单界面选择 Debug JS Remotely
- 调起PC端的 Google Chrome 浏览器运行 JavaScript 代码
- F12进入 Chrome 开发模式,可看到 js 脚本中的 console 输出
- 可在 sources 选项中进行断点调试
React-Native小版本更新快速
React-Native版本跟新较快,提供好的工具和方法有时变动,网上有些资料无法使用更新后的React-Native。
建议看React-Native英文文档,或是浏览本地的 React-Native 提供的JS源代码: Project_Name\node_modules\react-native
上线部署
- 创建Pushy应用
pushy login
pushy createApp --platform android
pushy selectApp --platform android
- 添加热更新内容
- 发布应用
- android项目根目录下:
./gradlew assembleRelease
生成安装包 pushy uploadApk APK_File_Path
上传安装包pushy bundle --platform android
发布更新热补丁
- android项目根目录下:
从 React-Native 0.50 开始,index.js
作为android、ios的统一入口文件,但在添加热更新后还是在 Android 项目中 assets 目录下编译文件 index.android.bundle
,否则会出现错误:
unable to load script from assets 'index.android.bundle'.
用下面代码编译文件
React-native bundle --platform Android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res