老規(guī)矩摩桶,先附文:
一. React Native環(huán)境搭建及安裝使用
- 安裝nvm
$ brew install nvm
[!]照著提示修改之后重啟終端
//查看當(dāng)前nvm版本
$ brew install nvm
- 安裝node
$ brew install nvm
//查看當(dāng)前node版本
$ node -v
- 安裝watchman
$ brew install watchman
//查看當(dāng)前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
- 創(chuàng)建reactNative項(xiàng)目
$ react-native init ReactApp
- 啟動http服務(wù) "Debug Server", app通過Debug Server 加載js
$ npm start
//[!]建議用react-native啟動
$ react-native start
[!]真機(jī)運(yùn)行報(bào)錯無法連接服務(wù)器解決方法:
AppDelegate文件里url替換為本機(jī)IP
jsCodeLocation = [NSURL URLWithString:[NSString stringWithFormat:@"http://%@:8081/index.ios.bundle?platform=ios&dev=true",@"[your ip here]"]];
重新運(yùn)行即可
[!]RCT文件報(bào)錯file not found解決方法:
$ cd [項(xiàng)目根目錄]
$ npm install
二. Code Push安裝及使用
其實(shí)全部都在 Code Push文檔里有詳細(xì)教程廉羔,這里只是做下簡述
- 安裝codePush
1)$ npm install react-native-code-push --save
//打開package.json文件,發(fā)現(xiàn)引用自動被創(chuàng)建:
"dependencies": {
"react-native-code-push": "^1.10.6-beta",
}
2) 在node_modules/react-native-code-push目錄下找到CodePush.xcodeproj,添加至項(xiàng)目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
//注冊成功后會得到相應(yīng)的access token
//注意終端里有提示需要輸入剛生成的access token媳溺,輸入洞渤,等待提示"Successfully logged-in"即可
- 添加codePush應(yīng)用
$ code-push app add MakaReact
- 查看應(yīng)用的環(huán)境信息
batong:~ lijing$ code-push deployment list MakaReact --format json
[
{
"name": "Production",
"key": "2MEpgNcTzjG7k4Jianwa6BXreHeq4yYjDRQQZ",
"package": null
},
{
"name": "Staging",
"key": "sLLmtK1LuuQxmltE-dSdg3VMeqSi4yYjDRQQZ",
"package": null
}
]
- 給應(yīng)用添加測試環(huán)境
batong:~ lijing$ code-push deployment add MakaReact Developer
Successfully added the "Developer" deployment with key "X12ecPQBWQ_w3XolMHBMXuu9ZZHc4yYjDRQQZ" to the "MakaReact" app.
- 重新查看環(huán)境信息,可發(fā)現(xiàn)多了一項(xiàng)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"这溅,值為響應(yīng)環(huán)境的"key"值
- Info.plilst中"bundleVersion"的值需要具體指定到很小的版本號组民,如1.0.0,并且這個版本號在更新bundle的時候需要指定悲靴,以達(dá)到對應(yīng)不同版本進(jìn)行熱更新的效果
- 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] <START> Building Dependency Graph
[22:01:26] <START> Crawling File System
[22:01:27] <START> find dependencies
[22:01:30] <END> Crawling File System (3990ms)
[22:01:30] <START> Building in-memory fs for JavaScript
[22:01:30] <END> Building in-memory fs for JavaScript (251ms)
[22:01:30] <START> Building in-memory fs for Assets
[22:01:31] <END> Building in-memory fs for Assets (198ms)
[22:01:31] <START> Building Haste Map
[22:01:31] <START> Building (deprecated) Asset Map
[22:01:31] <END> Building (deprecated) Asset Map (92ms)
[22:01:31] <END> Building Haste Map (358ms)
[22:01:31] <END> Building Dependency Graph (4811ms)
transformed 659/659 (100%)
[22:01:47] <END> 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
- 發(fā)布更新
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.