簡述
為了避免Android平臺和IOS平臺的重復開發,對于性能要求不太高的應用可以采用React Native進行開發,以減少開發成本,這里就簡單介紹一下React Native的開發環境搭建。(以Mac為例)
必須安裝的軟件
因為React Native離不開JavaScript,不管是Android還是IOS都需要安裝以下軟件
Homebrew
Homebrew是Mac系統的包管理器,安裝的目的是方便安裝Node等其他的軟件
安裝方法:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Tips:在Max OS X 10.11(El Capitan)版本中,homebrew在安裝軟件時可能會碰到/usr/local目錄不可寫的權限問題。可以使用下面的命令修復:
sudo chown -R `whoami` /usr/local
Node
使用剛剛安裝的Homebrew來安裝Node(React Native目前需要NodeJS5.0或者更高版本)
安裝方法:
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-cli用于完成創建項目、初始化、運行、更新、打包等任務
安裝方法:
brew install node
Tips:如果你看到EACCES: permission denied這樣的權限報錯,那么請參照上文的homebrew譯注,修復/usr/local目錄的所有權:
sudo chown -R `whoami` /usr/local
Android需要做的
配置ANDROID_HOME環境變量
確保ANDROID_HOME環境變量正確地指向了你安裝的Android SDK的路徑。具體的做法是把下面的命令加入到~/.bash_profile文件中
如果你不是通過Android Studio安裝的sdk,則其路徑可能不同,請自行確定清楚。
export ANDROID_HOME=~/Library/Android/sdk
然后使用下列命令使其立即生效(否則重啟后才生效):
source ~/.bash_profile
可以使用echo $ANDROID_HOME檢查此變量是否已正確設置。
$ echo $ANDROID_HOME
~/Library/Android/sdk
Android Studio
需要Android Studio2.0或更高版本
。。。。。。
安裝教程略過
安裝Android Studio只有一個目的:使用Android模擬器,當然使用Genymotion也是可以的,用真機當然更好了。
IOS需要做的
Apple大法好,Apple就是吊,IOS要做的很簡單,打開App Store,安裝Xcode,然后就咩有然后了,開干。
推薦安裝的軟件
Watchman
Watchman是由Facebook提供的監視文件系統變更的工具。安裝此工具可以提高開發時的性能(packager可以快速捕捉文件的變化從而實現實時刷新),總之就是為了更快。
brew install watchman
其實還有很多工具例如:Flow、Nuclide等,但是沒那么常用,像Flow入門較麻煩,就不說了。我們常用WebStorm或Sublime Text就行了。
Nuclide,這個要說一下,由于RN開發主要是編寫JS代碼,我們使用自己順手的工具就好,但是程序編譯、打包都需要敲命令行完成,所以Nuclide就是為了解決這個問而生的,但是目前只是基于Atom的一個插件,使用Nuclide之前必須安裝Atom,效果不是很好,但是相信FB會把它越做越好吧,就像Android Studio之于Eclipse。
測試安裝
重點來了,忙了半天,試試行不行。
react-native init MyApp
cd MyApp
這兩步走完,項目已經創建好了,并且已經切換到項目目錄。
接下來打開Android和IOS的模擬器,運行項目就行了
Android
react-native run-android
IOS
react-native run-ios
如下圖
出Hello World
修改index.android.js和index.ios.js,增加Android和IOS<Text>標簽
如下圖