React-Native嚐鮮計劃-環境搭建及 hello world

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:場景切換》

發佈了40 篇原創文章 · 獲贊 64 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章