一.準備工作
1.安裝Node.js
先安裝Homebrew,再利用Homebrew安裝Node.js,運行命令行如下:
//安裝Home-brew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
//安裝Node.js
brew install node
2.安裝React Native的命令行工具(react-native-cli)
npm install -g react-native-cli
3. 安裝CocoaPods
網上很多資源,這里不做過多說明。
二.集成React Native
1.安裝React Native
1)創建ReactComponent文件夾和配置文件
? ? ? ?在項目中建一個名為ReactComponent的文件夾, 用于存放我們react-native的相關文件, 再創建一個package.json文件, 用于初始化react-native.(文件夾名字自定義)
? ? ? ?文件目錄結構如下:
? ? ? 創建package.json文件,文件內容如下:
? ? ? ?其中,name為項目名稱。dependencies里為react和react-native的版本信息。
? ? ? ?建議利用react-native init Helloworld新建新項目時會自動創建package.json,直接把文件復制過來,更改name為自己的原生項目名,以確保react、和react-native的版本是最新的。
2)安裝React Native依賴包
在ReactComponent目錄下運行命令行:
npm install
這里有可能有錯誤。根據提示的錯誤進行操作。
實在install不回來的話,如果之前有創建過React Native項目,把里面的node_modules直接拷貝過來,也是沒有問題(個人嘗試過)。
2. 創建 index.ios.js(js文件入口)
在ReactComponent文件夾里創建index.ios.js文件,作為js文件入口。如圖一
index.ios.js文件內容如下:
3. Cocoapods集成React Native
若原項目無使用Cocoapods,則在根目錄下創建Podfile。(有則直接添加pod相關代碼)
目錄結構如下:
# 如果你的RN版本 >= 0.42.0,請加入下面這行
pod"Yoga",:path=>"../node_modules/react-native/ReactCommon/yoga"
3. 啟動開發服務器
在運行我們的項目之前,我們需要先啟動我們的開發服務器。進入 reactnative目錄(# From the root of your project, where the `node_modules` directory is located. 也就是node_modules文件夾所在的目錄) ,然后命令行運行:
react-native start 或者 npm start
4.運行項目