React Native 剛被 Face Book 開源不久,持續引起關注。“learn once,write anywhere” 是每個開發者的追求。目前國內關於 react native 學習資料不多,爲了嚐鮮,從本篇我文章開始,我決定來學習 React-Native。目前 React 支持 Android 和 iOS 的跨平臺開發,這系列文章都將以 Android 爲主要陣地,既然是跨平臺,其實是大同小異的。本章主要學習兩部分內容:一、 環境搭建,二、運行第一個 demo 頁面:hello world。
- 環境搭建
首先要說明的是:目前只支持在 mac OS 下搭建開發環境,windows 和 linux 後續必然也會支持,相信很快就會更新,請關注官網(跳牆)
1 安裝 Android 環境。
關於 Android 環境的安裝,本文就不在重複了,網上太多文章介紹了,建議直接看 google 官網,或者私聊我。
2 安裝 nvm,Node.js,watchman ,flow
啓動終端依次輸入以下命令:
brew install nvm成功安裝nvm。
brew install watchman等待一段時間,成功安裝 watchman。
brew install flow等待一一段時間,成功安裝 flow。
nvm install node等待一段時間,成功安裝node.js。
3 安裝 React-native-cli
npm install -g react-native-cli如果順利至此,React-Native 的環境搭建完成了。
- demo -hello world
有點類似 cocos 2d ,我們需要用命令去初始化項目。
react-native init AwesomeProject
這個過程需要一些時間,會在你當前目錄下生成一個名爲 AwesomeProject 的 react-native 工程目錄。目錄結構如下:
其中 android 文件夾 是 AndroidStudio 工程項目,ios 目錄是 XCode 工程目錄,另外還包含了 react-native 提供的庫。
進入目錄:
cd AwesomeProject運行項目:
react-native run-android第一次運行會有點慢,會去下載安裝gradle。
你會看到兩個終端界面:
說明 JS server 在 8081 端口成功啓動。
說明 Android 編譯成功,並安裝到手機。
注意:這個命令實際上做了兩件事:
1 使用 gradle 編譯 android 工程,並安裝到你當前鏈接的調試機或模擬器。(你也可以使用 AndroidStudio 去編譯)
2 啓動 js server (也就是說,我們頁面可以在server 端編輯,client 端加載更新)
如果你成功啓動項目,出現這個界面:
說明你沒成功連上 Js Server,你搖一搖手機,彈出菜單,選擇 Dev Setting-》選擇Debug server host & port-》輸入你的IP ,和 js server的端口號(冒號隔開)。
然後在搖一搖,選擇 Reload Js。
看到這個頁面,說明你成功了。 這裏繪製的內容,其實就來自工程目錄下的 index.android.js 文件。你可以修改裏面的內容,然後 reload 看結果。也可以自己做些研究了,下篇文章研究react-native的場景切換。->《react-native:場景切換》