React Native 初探

推薦文章

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

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

React Native入門實例教程系列文章

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 found Command /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"