最近在寫React Native的項目 在這里記錄一下将宪，推薦reactnative中文網(wǎng)。要養(yǎng)成良好的習(xí)慣泰涂，上圖??
從頭開始
寫項目肯定要舒適化項目對吧
react-native init MyReactNativeProject
提示：你可以使用--version參數(shù)創(chuàng)建指定版本的項目。
例如 react-native init MyReactNativeProject --version 0.39.2。注意版本號必須精確到兩個小數(shù)點赡茸。
在模擬器上運行
當(dāng)你完成了初始化React Native新項目后，就可以在項目目錄下運行react-native run-ios來啟動模擬器祝闻。如果一切配置都沒有問題占卧，應(yīng)該很快就能看到你的應(yīng)用在iOS模擬器上運行起來。
指定模擬的設(shè)備類型
你可以使用--simulator
參數(shù)联喘，在其后加上要使用的設(shè)備名稱來指定要模擬的設(shè)備類型（目前默認(rèn)為"iPhone 6"）华蜒。如果你要模擬iPhone 4s，那么這樣運行命令即可：
react-native run-ios --simulator "iPhone 4s"豁遭。
你可以在終端中運行
xcrun simctl list devices
來查看具體可用的設(shè)備名稱叭喜。
在設(shè)備上運行
你可以在真機上訪問開發(fā)服務(wù)器以快速測試和迭代。首先需要確保設(shè)備已使用usb連接至電腦蓖谢，同時和電腦處在同一wifi網(wǎng)絡(luò)內(nèi)捂蕴，然后在Xcode中選擇你的設(shè)備作為編譯目標(biāo)（左上角運行按鈕的右邊），然后點擊運行按鈕即可蜈抓。如果你需要在真機上啟用調(diào)試功能启绰，則需要打開RCTWebSocketExecutor.m文件，然后將其中的"localhost"改為你的電腦的IP地址沟使，最后啟用開發(fā)者菜單中的"Debug JS Remotely"選項委可。
項目的時候我們肯定會用到別人造好的輪子對吧就是所謂的三方庫How to use?
npm install 庫的名稱 —save
// 生產(chǎn)環(huán)境需要的庫 會在package.json文件中的dependencies中記錄來鏈接庫
npm install 庫的名稱 --save-dev
// 開發(fā)環(huán)境下的庫 會在package.json文件中的devDependencies中記錄來鏈接庫
react-native link
// 完成了！現(xiàn)在所有的原生依賴都成功地鏈接到你的iOS/Android項目了腊嗡。
提示：有寫三方庫是不需要link的 有寫三方庫link不成功着倾，需要自己手動添加。
項目寫完了是不是要打包燕少？
開發(fā)React Native的過程成,js代碼和圖片資源運行在一個Debug Server上卡者，每次更新代碼之后只需要使用command+R鍵刷新就可以看到代碼的更改，這種方式對于調(diào)試來說是非常方便的客们。
但當(dāng)我們需要發(fā)布App到App Store的時候就需要打包,使用離線的js代碼和圖片崇决。這就需要把JavaScript和圖片等資源打包成離線資源材诽，在添加到Xcode中，然后一起發(fā)布到App Strore中恒傻。
打包離線資源需要使用命令
react-native bundle
React Native的react-native bundle
命令是用來進行打包的命令脸侥，
react-native bundle
的詳細(xì)命令選項https://github.com/facebook/react-native/blob/master/local-cli/bundle/bundleCommandLineArgs.js。
其中我們常使用的一線命令選項：
--entry-file ,ios或者android入口的js名稱盈厘，比如index.ios.js
--platform ,平臺名稱(ios或者android)
--dev ,設(shè)置為false的時候?qū)avaScript代碼進行優(yōu)化處理睁枕。
--bundle-output, 生成的jsbundle文件的名稱，比如./ios/bundle/index.ios.jsbundle
--assets-dest 圖片以及其他資源存放的目錄,比如./ios/bundle
打包命令如下:
react-native bundle --entry-file index.ios.js --platform ios -- dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle
打包的時候注意先在ios文件夾下創(chuàng)建一個build文件夾
為了方便使用沸手，也可以把打包命令寫到npm script中:
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"bundle-ios":"node node_modules/react-native/local-cli/cli.js bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle"
},
然后運行命令直接打包:
npm run bundle-ios
jsCodeLocation
在ios中AppDelegate里可以看到設(shè)置JavaScript代碼位置的代碼：
Debug Server上的設(shè)置
NSURL *jsCodeLocation;
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"FreshqiaoReact"
initialProperties:nil
launchOptions:launchOptions];
在開發(fā)的過程中可以在這里配置Debug Server的地址外遇，當(dāng)發(fā)布上線的時候，就需要使用離線的jsbundle文件契吉，因此需要設(shè)置jsCodeLocation為本地的離線jsbundle跳仿。
設(shè)置離線的jsCodeLocation:
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index.ios" withExtension:@"jsbundle"];
離線包里的.jsbundle文件是經(jīng)過優(yōu)化處理的，因此運行效率也會比Debug的時候更高一些栅隐。
如果報錯
RCTSRWebSocket.m報錯塔嬉，需要在報錯的錯誤處SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t*)mask_key)做處理，只需在該處加上(void)即可租悄。如下：(void)SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);
處理 RCTSRWebSocket.m還是不行谨究。還需要在RCTScrollView.m 做出修改
@implementation RCTCustomScrollView
{
__weak UIView *_dockedHeaderView;
RCTRefreshControl *_refreshControl; //加入此行
}
不然會報 Use of undeclared identifier '_refreshControl'; did you mean 'refreshControl'?錯誤，RCTScrollView.m 位于Xcode項目中l(wèi)ibraries下React.xcodeproj / React / View
運行g(shù)ithub上的項目
npm install -g React-native-cli
npm install
react-native start
