1. 程式人生 > >手把手教你搭建React Native 開發環境 - ios篇 (React [email&#

手把手教你搭建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 **
恭喜你,成功填坑。

原文地址