React Native開發(fā)記錄以及Code Push熱更新(iOS)

老規(guī)矩摩桶,先附文:

一. React Native環(huán)境搭建及安裝使用

  1. 安裝nvm
$ brew install nvm 

[!]照著提示修改之后重啟終端

//查看當(dāng)前nvm版本
$ brew install nvm 
  1. 安裝node
$ brew install nvm 
//查看當(dāng)前node版本
$ node -v 
  1. 安裝watchman
$ brew install watchman
//查看當(dāng)前node版本
$ watchman -v 
  1. 安裝flow
$ brew install flow
  1. 安裝reactNative
$ npm install -g react-native-cli
  1. 修改npm鏡像
$ npm config set registry https://registry.npm.taobao.org 
$ npm info underscore
//如果上面配置正確這個命令會有字符串response
  1. 創(chuàng)建reactNative項(xiàng)目
$ react-native init ReactApp
  1. 啟動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ì)教程廉羔,這里只是做下簡述

  1. 安裝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
  1. 注冊codePush賬戶
$ code-push register  
//注冊成功后會得到相應(yīng)的access token
//注意終端里有提示需要輸入剛生成的access token媳溺,輸入洞渤,等待提示"Successfully logged-in"即可
  1. 添加codePush應(yīng)用
$ code-push app add MakaReact
  1. 查看應(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
  }
]
  1. 給應(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.
  1. 重新查看環(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
  }
]
  1. Info.plist文件里添加"CodePushDeploymentKey"这溅,值為響應(yīng)環(huán)境的"key"值
  2. Info.plilst中"bundleVersion"的值需要具體指定到很小的版本號组民,如1.0.0,并且這個版本號在更新bundle的時候需要指定悲靴,以達(dá)到對應(yīng)不同版本進(jìn)行熱更新的效果
  3. js文件加入熱更新邏輯
import CodePush from "react-native-code-push";  
//在componentDidMount處添加
componentDidMount() {  
  CodePush.sync();  
}  
  1. 打包
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
  1. 發(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.
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末臭胜,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子癞尚,更是在濱河造成了極大的恐慌耸三,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,039評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件浇揩,死亡現(xiàn)場離奇詭異仪壮,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)胳徽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3 395
  • 文/潘曉璐 我一進(jìn)店門积锅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來爽彤,“玉大人,你說我怎么就攤上這事乏沸∫穑” “怎么了?”我有些...
    開封第一講書人閱讀 165,417評論 0 356
  • 文/不壞的土叔 我叫張陵蹬跃,是天一觀的道長匙瘪。 經(jīng)常有香客問我,道長蝶缀,這世上最難降的妖魔是什么丹喻? 我笑而不...
    開封第一講書人閱讀 58,868評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮翁都,結(jié)果婚禮上碍论,老公的妹妹穿的比我還像新娘。我一直安慰自己柄慰,他們只是感情好鳍悠,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著坐搔,像睡著了一般藏研。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上概行,一...
    開封第一講書人閱讀 51,692評論 1 305
  • 那天蠢挡,我揣著相機(jī)與錄音,去河邊找鬼凳忙。 笑死业踏,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的涧卵。 我是一名探鬼主播勤家,決...
    沈念sama閱讀 40,416評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼柳恐!你這毒婦竟也來了却紧?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,326評論 0 276
  • 序言:老撾萬榮一對情侶失蹤胎撤,失蹤者是張志新(化名)和其女友劉穎晓殊,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體伤提,經(jīng)...
    沈念sama閱讀 45,782評論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡巫俺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了肿男。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片介汹。...
    茶點(diǎn)故事閱讀 40,102評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡却嗡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出嘹承,到底是詐尸還是另有隱情窗价,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評論 5 346
  • 正文 年R本政府宣布叹卷,位于F島的核電站撼港,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏骤竹。R本人自食惡果不足惜帝牡,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蒙揣。 院中可真熱鬧靶溜,春花似錦、人聲如沸懒震。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽个扰。三九已至瓷炮,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間锨匆,已是汗流浹背崭别。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1 272
  • 我被黑心中介騙來泰國打工冬筒, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留恐锣,地道東北人。 一個月前我還...
    沈念sama閱讀 48,332評論 3 373
  • 正文 我出身青樓舞痰,卻偏偏與公主長得像土榴,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子响牛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評論 2 355

推薦閱讀更多精彩內(nèi)容