React Native簡介及開發環境配置
React Native簡介
React Native是Facebook 在2015 大會上推出的基於 JavaScript 的開源框架。React Native 結合了 Web 應用和 Native 應用的優勢,可以使用 JavaScript 來開發 iOS 和 Android 原生應用。開發者只需學習一種語言就能輕易為任何平臺高效地編寫程式碼。React Native著力於提高多平臺開發的開發效率 —— 僅需學習一次,編寫任何平臺(Learn once, write anywhere)
開發環境配置
安裝Homebrew
Homebrew:Mac系統的包管理器,用於安裝NodeJS和一些其他必需的工具軟體。
開啟終端輸入
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
如果遇到相關許可權問題。執行下面命令修復
sudo chown -R `whoami` /usr/local
安裝Node.js
brew install node
設定npm映象
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao .org/dist --global
Yarn、React Native的命令列工具(react-native-cli)
Yarn是Facebook提供的替代npm的工具,可以加速node模組的下載。React Native的命令列工具用於執行建立、初始化、更新專案、執行打包服務等任務。
npm install -g yarn react-native-cli
安裝完yarn後同理也要設定映象源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao .org/dist --global
如果遇到相關許可權問題。執行下面命令修復
sudo chown -R `whoami` /usr/local
安裝Android Studio 和Genymotion、Git
React Native目前需要Android Studio2.0或更高版本。
Java Development Kit [JDK] 1.8或更高版本
配置ANDROID_HOME環境變數
export ANDROID_HOME=~/Library/Android/sdk
將Android SDK的Tools目錄新增到PATH變數中
這個就不多說了,給出我的mac的環境變數配置
Watchman
Watchman是由Facebook提供的監視檔案系統變更的工具。安裝此工具可以提高開發時的效能
brew install watchman
Flow
Flow是一個靜態的JS型別檢查工具
brew install flow
安裝React Native開發工具WebStorm
還有其他很多開發工具,建議使用WebStorm,WebStorm和Android studio有很多相似的地方,上手會很快,網上有破解版,自行破解安裝
測試安裝
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
或者用開發工具直接新建React Native應用
注:以上內容來自React Native中文網,安裝過程中可能會出現各種各樣的問題,不要著急,一步一步來,遇到問題找google或者直接百度。
在Android模擬器上及Xcode模擬器上的執行截圖
執行過程中可能會出現8081埠被佔用的情況
在終端中輸入
//檢視8081端口占用情況:lsof -i tcp:8081
//去除佔用:kill pid(具體數字)
Android模擬器:
iOS裝置: