ReactNative持續學習筆記(一)

開發環境搭建

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)

配置NSAppTransportSecurity

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版本的引入失敗

所有步驟都相同,編譯的時候遇到如下錯誤

pod引入reactnative0.46.4版本出現的編譯錯誤

但是!!!最后!!!機智的我解決了這個問題。鏈接如下

https://github.com/facebook/react-native/issues/14925

簡要來說就是0.46以上版本pod的配置應在profile里添加BatchedBridge的子模塊依賴,教程里沒有更新。

意不意外!?驚不驚喜!?

手動集成

本來打算再來一遍,但是既然pod引入問題已經解決,這塊就不寫了。

Tip

由于node_modules組件包很大,上傳git的版本應忽略此文件夾(ReactComponent/*)。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容