從零開始生成一個ios react-native專案

漲月薪發表於2018-03-27

iOSReact

step1 配置環境

以下為必須安裝的軟體！！

Homebrew：是一款自由及開放原始碼的軟體包管理系統，用以簡化Mac OS X系統上的軟體安裝過程。
```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
複製程式碼
```
注：homebrew在安裝軟體時可能會碰到/usr/local目錄不可寫的許可權問題EACCES: permission denied，使用以下命令修改許可權。
```
sudo chown -R `whoami` /usr/local
複製程式碼
```
Node：是一個基於 Chrome V8 引擎的 JavaScript 執行環境
- React Native目前需要NodeJS 5.0或更高版本。
```
brew install node
複製程式碼
```
- 安裝完node後設定npm映象以加速後面的過程（或使用科學上網工具）。注意：不要使用cnpm！cnpm安裝的模組路徑比較奇怪，packager不能正常識別！
```
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
複製程式碼
```
Yarn：一個包管理器，你可以通過它使用全世界開發者的程式碼，或者分享自己的程式碼,是Facebook提供的替代npm的工具yarn代替npm install，可以加速node模組的下載。
```
npm install -g yarn react-native-cli
複製程式碼
```
- 設定映象源
```
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
複製程式碼
```
Xcode： Apple 平臺開發者工具集, React Native目前需要Xcode 8.0 或更高版本下載連結
Watchman： Facebook提供的監視檔案系統變更的工具,packager可以快速捕捉檔案的變化從而實現實時重新整理。
```
brew install watchman
複製程式碼
```

step2 生成專案

初始化一個新專案
- 注意：init命令預設會建立最新的版本，而目前最新的0.45及以上版本需要下載boost等幾個第三方庫編譯。這些庫在國內即便翻牆也很難下載成功，導致無法執行iOS專案
- 解決方案：
  
  a. 安裝0.44.3版本
```
react-native init AwesomeProject --version 0.44.3
複製程式碼
```
  b.下載第三方庫網盤連結下載完成後，放置到~/.rncache
```
# 進入~目錄，即使用者目錄
cd ~   
# 建立目錄，如果已經存在就不用建立了
mkdir .rncache
# 依次複製檔案
cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/ 
複製程式碼
```
啟動Xcode，開啟AwesomeProject/ios 並執行