手把手教你搭建React Native 開發環境 - ios篇 (React [email
由於之前我是h5的,沒接觸過ios和安卓, 也不瞭解xcode配置,所以 建議學reace-native之前還是先去了解一下ios和安卓開發環境搭建等問題。
環境下載及配置
nodejs:https://nodejs.org/en/download/
設定淘寶映象
$ npm config set registry http://registry.npm.taobao.org/
Xcode: https://developer.apple.com/xcode/
react-native-cli:
npm:
$ sudo npm install -g react-native-cli
yarn:
$ sudo yarn add global react-native-cli
watchman:
& brew install watchman
初始化專案
$ sudo react-native init projectName
啟動
$ sudo react-native run-ios --simulator
填坑開始
填坑前囑咐兩句:
友情提示: 檔案具有讀寫許可權很重要!檔案具有讀寫許可權很重要!檔案具有讀寫許可權很重要!
檢視隱藏檔案的快捷鍵是 command + shift + .;
啟動後會有一波錯誤來襲,準備填坑
錯誤:
Print: Entry, “:CFBundleIdentifier”, Does Not Exist
見到這個錯誤先不要著急,向上滾動,尋找詳細資訊:
如果詳細資訊中顯示
error: Build input file cannot be found: ‘/Users/cys/Desktop/Work/code/projectName/node_modules/react-native/third-party/double-conversion-1.1.5/src/double-conversion.cc’
不要著急,你只要見到 third-party 是這個資料夾下出的錯誤 那基本都是中國強(牆)惹的禍:
首先下載如下資訊:
https://github.com/google/glog/archive/v0.3.4.tar.gz
https://github.com/google/double-conversion/archive/v1.1.5.tar.gz
https://github.com/react-native-community/boost-for-react-native/releases/download/v1.63.0-0/boost_1_63_0.tar.gz
https://github.com/facebook/folly/archive/v2016.09.26.00.tar.gz
將如上下載的資訊拷貝至 ~/.rncache/ 目錄
在將以上目錄檔案拷貝到專案中 node_modules/react-native/third-party/ 目錄,執行解壓操作tar -zxf 檔名
再次執行 啟動 操作
經過以上的步驟,你會發現 還是無法啟動(NND)。
OK,繼續看錯誤,你會發現錯誤還是 Print: Entry, “:CFBundleIdentifier”, Does Not Exist(什麼鬼,怎麼還是這錯誤),咱們來看看錯誤的詳細資訊:
/Users/cys/Desktop/Work/code/projectName/node_modules/react-native/third-party/glog-0.3.4/src/base/mutex.h:105:10: fatal error: ‘config.h’ file not found
#include “config.h” // to figure out pthreads support
^~~~~~~~~~
1 error generated.
這錯誤怎麼破?
進入專案根目錄執行:
$ cd node_modules/react-native/third-party/glog-0.3.4/
執行
$ sudo ./configure
來吧,繼續執行 啟動(記得要在專案跟目錄執行啟動命令哦) 操作,試試。
耐心等一下,啟動編譯時間比較長…
經過耐心等待,你會發現,還TNND的報錯:
Print: Entry, “:CFBundleIdentifier”, Does Not Exist
還是這個錯誤…
彆著急,我們繼續看詳細資訊:
error: Build input file cannot be found: ‘/Users/cys/Desktop/Work/code/projectName/node_modules/react-native/Libraries/WebSocket/libfishhook.a’
這個錯誤資訊又怎麼破?
來, 用xcode開啟你專案下的ios目錄(推薦你開啟ios目錄前,最好給專案目錄下ios資料夾的所有檔案賦予 讀寫 許可權,特別是 projectName.xcodeproj 檔案,不加你會後悔的!)
如圖更改 libfishhook.a
oK,接下來在 啟動一下試試吧
如果你看見了如下資訊
** BUILD SUCCEEDED **
恭喜你,成功填坑。