React Native 初探

標籤：

推薦文章

React Native 簡介：用 JavaScript 搭建 iOS 應用 (1)

React Native 簡介：用 JavaScript 搭建 iOS 應用 (2)

React Native入門執行個體教程系列文章

React Native組件開發系列文章

 

 

React Native 環境搭建 - Mac版

 

1. 安裝homebrew

用brew -v查看是否安裝過；

如果沒有，則瀏覽器訪問 http://brew.sh/ 安裝

 

2. 安裝node

用node -v查看是否安裝過

安裝命令：

$ brew install node

 

3. 安裝watchman

安裝命令：

$ brew install watchman

watchman是Facebook的檔案監控器，React Native 用它來檢測代碼變化，以便重新編譯

 

4. 安裝flow

安裝命令：

$ brew install flow

flow是檢測js文法的工具

 

5. 通過npm安裝React Native

安裝命令：

$ npm install -g react-native-cli

npm是node的包管理器，相當於 iOS的CocoaPods 或 Java的Maven

 

6. 建立Helloworld例子

在終端下切換到想儲存項目的檔案夾，然後運行：

$ react-native init HelloWorld

這是用CLI工具來構建

建立完後目錄如下：

 

7. 運行HelloWorld.xcodeproj

開啟iOS工程，運行，運行結果如下：

這步過程中遇到一個問題，運行報錯：

../node_modules/react-native/packager/react-native-xcode.sh: line 45: react-native: command not foundCommand /bin/sh failed with exit code 127

解決方案：

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

這篇中有人給出了一種方法，是在

../node_modules/react-native/packager/react-native-xcode.sh

檔案的開頭處加上：

source ~/.bash_profile

但是我試了沒有成功

後來採用的方法是，注釋掉react-native-xcode.sh最後一塊代碼

#react-native bundle #  --entry-file index.ios.js #  --platform ios #  --dev $DEV #  --bundle-output "$DEST/main.jsbundle" #  --assets-dest "$DEST"

 

React Native 初探