React-Native 新手入门

RN开发环境搭建和Demo项目部署

RN开发环境搭建和Demo项目部署

1. 安装 Node.js
   
   1. 新版可能不支持npm，找个支持的版本
2. 设置 npm 镜像
   
   1. npm config set registry https://registry.npm.taobao.org
   2. npm config set disturl https://npm.taobao.org/dist
3. 安装React-Native
   
   1. 在react-native目录下，执行npm install -g react-native-cli安装
4. 初始化项目：react-native init project_name
   
   1. 很慢，可能报错。多次执行直到成功

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

上线部署

使用RN中文网上提供的Pushy工具，Pushy快速指南

• 创建Pushy应用
  
  • pushy login
  • pushy createApp --platform android
  • pushy selectApp --platform android
• 添加热更新内容
• 发布应用
  
  • android项目根目录下：./gradlew assembleRelease生成安装包
  • pushy uploadApk APK_File_Path 上传安装包
  • pushy bundle --platform 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