開發環境搭建
1、Homebrew
Mac系統基于ruby的包管理工具,解決安裝Linux平臺下開源工具時的庫依賴等配置問題。
下載:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"(注:/usr/local目錄不可寫時,sudo chown -R `whoami` /usr/local 修復。)
使用:brew -v、brew list、brew search wget、brew install wget、brew remove wget
2、Node.js
brew install node安裝NodeJS環境。
node -v,版本8.2.1。npm -v,版本5.3.0
注:安裝完成后發現npm命令找不到(-bash: /usr/local/bin/npm: No such file or directory)。npm,node.js的包管理工具,一般在install node的時候即一同安裝,但我在安裝時因mac系統更新時舊版留在了錯誤的文件夾路徑中,而且重裝node.js時并沒有覆蓋掉,所以從錯誤的路徑中手動刪除(usr/local/bin中的npm顯示原身,刪除)。
3、npm install -g react-native-cli
ReactNative的命令行包管理工具。
//成功
/usr/local/bin/react-native -> /usr/local/lib/node_modules/react-native-cli/index.js
+ react-native-cli@2.0.1?
added 41 packages in 5.394s
4、react-native init TestProject
在想要新建react-native項目的文件路徑下執行,init后是自定義文件名
5、項目目錄下react-native run-ios,或打開.xcodeproj直接運行(直接新建的reactnative項目不需要手動npm start,但舊項目集成reactnative需要在正確的路徑下npm start)
已有項目接入ReactNative(此過程非常脆弱)
cocoapods接入
寫在前面(重要):此次嘗試是嚴格按照官網流程,導入當前最新版本0.46.4,但經歷了痛徹心扉的失敗,后來嘗試引入0.29.2舊版本成功,于是對其全過程進行簡要的分析記錄。
1、項目目錄下新建ReactComponent文件夾放入node_modules文件夾(舊版引入請使用備份、最新版可直接拷貝init的新項目中的文件夾)、index.ios.js(reactnative的root起點文件)、和package.json(此文件用于npm start啟動服務)。
2、proflie中的本地引入配置(!注意路徑的配置!):
舊版
pod 'React', :path =>'./ReactComponent/node_modules/react-native', :subspecs => ['Core', 'ART', 'RCTLinkingIOS', //根據需要引入 ]
新版
pod 'React',:path=>'./ReactComponent/node_modules/react-native',:subspecs=>['Core',
'DevSupport' #RN>=0.43時需要app內的menu應加DevSupport,
'RCTText',
'BatchedBridge'#RN>=0.46時必須引入 //根據需要引入]
# RN>=0.42.0 時應加入Yoga
pod "Yoga",:path=>"./ReactComponent/node_modules/react-native/ReactCommon/yoga"? //還糾結了雙引號單引號的問題,實際證明并無影響
3、配置info.plist中的NSAppTransportSecurity避免http訪問失敗(實際好像模擬器調試時并不會失敗url--http://localhost:8081/index.ios.bundle?platform=ios&dev=true)
4、新建ReactRootVC在viewdidload中加入以下代碼,npm start啟動服務,運行。
NSString* strUrl =@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
NSURL* jsCodeLocation = [NSURLURLWithString:strUrl];
//注意項目名ProjectName與index.ios.js和package.json中的匹配
RCTRootView* rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"ProjectName" initialProperties:nil launchOptions:nil];
self.view= rootView;
5、0.46.4版本的引入失敗
所有步驟都相同,編譯的時候遇到如下錯誤
但是!!!最后!!!機智的我解決了這個問題。鏈接如下
https://github.com/facebook/react-native/issues/14925
簡要來說就是0.46以上版本pod的配置應在profile里添加BatchedBridge的子模塊依賴,教程里沒有更新。
意不意外!?驚不驚喜!?
手動集成
本來打算再來一遍,但是既然pod引入問題已經解決,這塊就不寫了。
Tip
由于node_modules組件包很大,上傳git的版本應忽略此文件夾(ReactComponent/*)。