React Native入門——環境配置及Hello World

http://blog.csdn.net/yuanguozhengjust/article/details/50468050

最近React Native很火,想寫點文章,這篇文章主要介紹如何快速創建一個RN應用,包含一些以後會用到的環境配置。


0.電腦和操作系統、上網

推薦Mac,包括Air、MBP啥的都行,性能不要太差,跑的OS X就行,要是沒錢的,或者不喜歡蘋果系統的,推薦Linux(如Mint、Ubuntu,但不推薦CentOS這類系統),Windows暫時支持不好,啥時候能支持好我再把這句話刪了。

不過要注意,非OS X開發不了iOS程序!

由於React-Native依賴npm、github等工具嚴重,所以必須要科學上網,這裏請自行解決。


1.Node.js環境

自從io.js和Node.js合併以後,很多東西省事不少,可以從http://nodejs.orghttp://npm.taobao.org也行)下載stable版的4.2或5.0以上版本Node,除源碼安裝外,其他方式安裝很傻瓜,一直下一步即可。

Node.js安裝完成後(安不好找其他教程),推薦利用npm安裝nrm(方便切換源),如果Node.js環境較多,可以再安一個nvm。

命令:sudo npm install -g nrm,請注意以全局方式安裝,實在不能科學上網的一定要使用nrm use taobao來切換淘寶的源。

這裏說明一下Node.js源,國內淘寶架設了鏡像,速度快,不過有些包更新不及時或沒有,會導致一些奇怪的問題,所以能科學上網的,還是建議使用官網源!


2.React Native CLI

這個東西用於操作React Native工程(如:創建、運行等),實際是基於Node.js的命令行工具,安裝命令如下:sudo npm install -g react-native-cli,一定不要裝成react-native了,這問題很蛋疼。開源的工具更新快,建議過上一段時間就執行一下這個命令更新一下。


3.必要的開發工具

你以爲裝了這些就搞定了?想開發APP,還能擺脫了人家的SDK?所以Xcode和Android Studio、Android SDK(Android NDK最好也裝上)還是必須要有的,Xcode在App Store,Android Studio和SDK在http://developer.android.com/intl/zh-cn/sdk/index.html,其中Xcode建議7.0以上,Android Studio建議1.5以上,Android SDK建議安裝包含23.0.1和比它更新版本的Build Tools。


4.小試牛刀

找一個空目錄,從終端打開,在這個目錄裏運行下面的命令,從而創建React-Native工程,比如工程叫做:TestApp

注:創建期間請保持網絡暢通,npm需要自動補全依賴包

react-native init TestApp


包不多,也就五六百個吧,在此期間,可以上上廁所、看會兒書、聊聊天神馬的,這速度我也是醉了……


媽蛋,看到這個,終於是好了,其實上面已經把運行方法寫得清清楚楚了,在工程根目錄找到ios/TestApp.xcodeproj打開,點運行即可運行iOS程序,在根目錄執行react-native run-android即可運行Android程序。

咱們待會兒再運行,先解決幾個可能會發生的問題

第一,請先輸入以下命令安裝brew(沒有ruby請先安裝ruby)

OS X:ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Linux:ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/linuxbrew/go/install)"

第二,利用brew安裝watchman

brew install watchman

至於flow,可以先不安裝

好了,讓咱們跑起來吧,其實可以不按照他們的說法,步驟如下:

1.在項目根目錄執行npm start,啓動提供jsbundle的Node.js服務器(它會默認監聽本地的8081端口,請確保不被佔用)


稍等一會兒以後,顯示下面的內容說明服務器已經成功跑起來了,如果報錯可能是watchman等插件沒有安裝成功,請自行排查並安裝:


2.打開ios/TestApp.xcodeproj、Android Studio打開android目錄,待IDE加載完成後(此時要等Android Studio)點擊運行按鈕(此時要等Xcode),目前咱們先運行在模擬器上,後面再說真機:


左:iOS   右:Android

如果Server有問題,連不上,可能就會出現下面的界面和錯誤:



當然,在Android Studio和Xcode中同樣是能看到報錯的




好了,HelloWorld工程就OK了,是不是有點小激動呢?



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章