老规矩，先附文：
React Native文档 - 英文
React Native文档 - 中文
Redux文档 - 英文
Redux文档 - 中文
Code Push文档
一. React Native环境搭建及安装使用
- 安装nvm
$ brew install nvm
[!]照着提示修改之后重启终端
//查看当前nvm版本
$ brew install nvm
- 安装node
$ brew install nvm
//查看当前node版本
$ node -v
- 安装watchman
$ brew install watchman
//查看当前node版本
$ watchman -v
- 安装flow
$ brew install flow
- 安装reactNative
$ npm install -g react-native-cli
- 修改npm镜像
$ npm config set registry https://registry.npm.taobao.org
$ npm info underscore
//如果上面配置正确这个命令会有字符串response
- 创建reactNative项目
$ react-native init ReactApp
- 启动http服务 "Debug Server", app通过Debug Server 加载js
$ npm start
//[!]建议用react-native启动
$ react-native start
[!]真机运行报错无法连接服务器解决方法：
AppDelegate文件里url替换为本机IP
jsCodeLocation = [NSURL URLWithString:[NSString stringWithFormat:@"http://%@:8081/index.ios.bundle?platform=ios&dev=true",@"[your ip here]"]];
重新运行即可
[!]RCT文件报错file not found解决方法：
$ cd [项目根目录]
$ npm install
二. Code Push安装及使用
其实全部都在 Code Push文档里有详细教程，这里只是做下简述
- 安装codePush
1）$ npm install react-native-code-push --save
//打开package.json文件，发现引用自动被创建：
"dependencies": {
"react-native-code-push": "^1.10.6-beta",
}
2) 在node_modules/react-native-code-push目录下找到CodePush.xcodeproj，添加至项目Libraries下
3) Build Phases => Link Binary With Libraries => 添加libCodePush.a和liz.tbd
4) Build Settings => Header Search Paths => 添加$(SRCROOT)/../node_modules/react-native-code-push
- 注册codePush账户
$ code-push register
//注册成功后会得到相应的access token
//注意终端里有提示需要输入刚生成的access token，输入，等待提示"Successfully logged-in"即可
- 添加codePush应用
$ code-push app add MakaReact
- 查看应用的环境信息
batong:~ lijing$ code-push deployment list MakaReact --format json
[
{
"name": "Production",
"key": "2MEpgNcTzjG7k4Jianwa6BXreHeq4yYjDRQQZ",
"package": null
},
{
"name": "Staging",
"key": "sLLmtK1LuuQxmltE-dSdg3VMeqSi4yYjDRQQZ",
"package": null
}
]
- 给应用添加测试环境
batong:~ lijing$ code-push deployment add MakaReact Developer
Successfully added the "Developer" deployment with key "X12ecPQBWQ_w3XolMHBMXuu9ZZHc4yYjDRQQZ" to the "MakaReact" app.
- 重新查看环境信息，可发现多了一项Developer
batong:~ lijing$ code-push deployment list MakaReact --format json
[
{
"name": "Developer",
"key": "X12ecPQBWQ_w3XolMHBMXuu9ZZHc4yYjDRQQZ",
"package": null
},
{
"name": "Production",
"key": "2MEpgNcTzjG7k4Jianwa6BXreHeq4yYjDRQQZ",
"package": null
},
{
"name": "Staging",
"key": "sLLmtK1LuuQxmltE-dSdg3VMeqSi4yYjDRQQZ",
"package": null
}
]
- Info.plist文件里添加"CodePushDeploymentKey"，值为响应环境的"key"值
- Info.plilst中"bundleVersion"的值需要具体指定到很小的版本号，如1.0.0，并且这个版本号在更新bundle的时候需要指定，以达到对应不同版本进行热更新的效果
- js文件加入热更新逻辑
import CodePush from "react-native-code-push";
//在componentDidMount处添加
componentDidMount() {
CodePush.sync();
}
- 打包
batong:MakaReact lijing$ react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./codePush_ios/main.jsbundle --assets-dest ./codePush_ios --dev true
Unable to parse cache file. Will clear and continue.
[22:01:26] Building Dependency Graph
[22:01:26] Crawling File System
[22:01:27] find dependencies
[22:01:30] Crawling File System (3990ms)
[22:01:30] Building in-memory fs for JavaScript
[22:01:30] Building in-memory fs for JavaScript (251ms)
[22:01:30] Building in-memory fs for Assets
[22:01:31] Building in-memory fs for Assets (198ms)
[22:01:31] Building Haste Map
[22:01:31] Building (deprecated) Asset Map
[22:01:31] Building (deprecated) Asset Map (92ms)
[22:01:31] Building Haste Map (358ms)
[22:01:31] Building Dependency Graph (4811ms)
transformed 659/659 (100%)
[22:01:47] find dependencies (20220ms)
bundle: start
bundle: finish
bundle: Writing bundle output to: ./codePush_ios/main.jsbundle
bundle: Done writing bundle output
bundle: Copying 33 asset files
bundle: Done copying assets
- 发布更新
batong:MakaReact lijing$ code-push release MakaReact -d Developer ./codePush_ios/main.jsbundle 1.0.0
Upload progress:[==================================================] 100% 0.0s
Successfully released an update containing the "./codePush_ios/main.jsbundle" file to the "Developer" deployment of the "MakaReact" app.