此文是以一名Android工程師的角度來(lái)觀察和學(xué)習(xí)React-Native, 如果你是一名Android工程師, 對(duì)React-Native感興趣, 那么閱讀此文可能會(huì)有收獲.

另外, 我也是React-Native的初學(xué)者, 后續(xù)我會(huì)將學(xué)習(xí)React-Natvie的心得及時(shí)發(fā)布給大家. 如果您想學(xué)習(xí)有關(guān)RN(React-Native的簡(jiǎn)稱(chēng))的高級(jí)知識(shí), 不好意思, 請(qǐng)繞行, 以免耽誤您的寶貴時(shí)間!

好的, 那我們正式開(kāi)始第一篇...

React-Native環(huán)境搭建

官方中文網(wǎng)站說(shuō)的已經(jīng)非常清楚了, 詳情可參考鏈接: http://reactnative.cn/docs/0.37/getting-started.html#content

在此我將官方的說(shuō)法總結(jié)一下.

1 . 首先你需要翻墻下載Chocolatey包管理器, 這個(gè)工具可以方便你安裝Python和NodeJs. 但實(shí)際上,如果你翻墻不方便的話, 咱可以自己手動(dòng)安裝Python和NodeJs
2 . 要安裝Python2而不是Python3
3 . 不要安裝NodeJs 7.1的版本, 否則在windows系統(tǒng)上會(huì)有問(wèn)題
4 . 附上Python和NodeJs的下載鏈接: http://pan.baidu.com/s/1skUPPMX
5 . 安裝完NodeJs之后, 你就可以在命令行使用nmp命令了. 我們需要用nmp命令來(lái)安裝React Native的命令行工具-->react-native-cli . 相關(guān)命令如下:

   npm install -g yarn react-native-cli

在運(yùn)行此命令之前, 建議設(shè)置npm鏡像, 否則很有可能訪問(wèn)失敗(或者也可以翻墻解決這個(gè)問(wèn)題).

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

運(yùn)行成功后如下圖所示:

1480503806147.png

6 . 搭建Android Studio 2.0+開(kāi)發(fā)環(huán)境, 作為Android開(kāi)發(fā)人員, 這個(gè)步驟應(yīng)該已經(jīng)非常熟悉, 我不做過(guò)多介紹
7 . 項(xiàng)目初始化(此操作需要翻墻執(zhí)行, 這個(gè)命令會(huì)初始化一個(gè)工程久橙、下載React Native的所有源代碼和依賴包)

    react-native init AwesomeProject 

運(yùn)行成功后命令行如下所示:

1480602176992.png

下載下來(lái)后目錄結(jié)構(gòu)如下所示:

1480496515529.png

注意: 此命令即使在翻墻情況下失敗率也是比較高的, 尤其在國(guó)內(nèi)網(wǎng)絡(luò)很不穩(wěn)定, 所以一定要保持耐心. 如果運(yùn)行出錯(cuò), 很有可能就是網(wǎng)絡(luò)原因, 而不是你的命令出了問(wèn)題.

8 . 部署項(xiàng)目

作為Android開(kāi)發(fā)人員,需要進(jìn)入android目錄進(jìn)行相關(guān)操作:

1480496617654.png

從這個(gè)目錄可以看出, 這是一個(gè)典型的Android Studio項(xiàng)目文件, 你可以使用Android Studio工具導(dǎo)入這個(gè)項(xiàng)目, 然后直接部署在你的模擬器或者真機(jī)上. 如果是前端開(kāi)發(fā)人員, Studio玩的不熟的話, 官方文檔建議運(yùn)行如下命令進(jìn)行部署:

react-native run-android

但是作為Android開(kāi)發(fā)人員, 我覺(jué)得此命令不好控制, 萬(wàn)一運(yùn)行失敗不好調(diào)試, 所以還是直接用Studio運(yùn)行比較靠譜.

如何運(yùn)行項(xiàng)目

1 . 必須啟動(dòng)ReactNative服務(wù)器.

首先進(jìn)入項(xiàng)目根目錄, 按住shift鍵,然后點(diǎn)擊鼠標(biāo)右鍵, 選擇打開(kāi)命令行窗口(你可以在命令行中切換到項(xiàng)目根目錄):

1480497462433.png

然后調(diào)用如下命令啟動(dòng)服務(wù)器:

    react-native start

啟動(dòng)后界面如下所示:

1480497551055.png

可以用瀏覽器訪問(wèn) http://localhost:8081/index.android.bundle?platform=android 看看是否可以看到打包后的腳本。第一次訪問(wèn)通常需要十幾秒腿时，并且在packager的命令行可以看到進(jìn)度條.

2 . 使用Studio導(dǎo)入項(xiàng)目, 然后運(yùn)行在模擬器上

這是導(dǎo)入項(xiàng)目之后的結(jié)果:

1480497646105.png

搖晃設(shè)備或按Menu鍵:
（1）可以打開(kāi)調(diào)試菜單，點(diǎn)擊Dev Settings

1480498139616.png

（2）選Debug server host&port for device，輸入你的正在運(yùn)行packager的那臺(tái)電腦的局域網(wǎng)IP加:8081（同時(shí)要保證手機(jī)和電腦在同一網(wǎng)段贴汪，且沒(méi)有防火墻阻攔）, 如果是Genymotion模擬器,可以直接寫(xiě)成10.0.3.2:8081, 如果是原生模擬器,可以寫(xiě)成10.0.2.2:8081

1480498283601.png

（3）再按back鍵返回播赁，再按Menu鍵，在調(diào)試菜單中選擇Reload JS薪铜，就應(yīng)該可以看到運(yùn)行的結(jié)果了众弓。如果真實(shí)設(shè)備白屏但沒(méi)有彈出任何報(bào)錯(cuò)，可以在安全中心里看看是不是應(yīng)用的“懸浮窗”的權(quán)限被禁止了隔箍。

1480498327424.png

3 . 如何修改頁(yè)面內(nèi)容

ReactNative在Android上運(yùn)行的程序可以認(rèn)為就是一個(gè)殼子或者容器, 真正的內(nèi)容來(lái)源于服務(wù)器上的網(wǎng)頁(yè)(實(shí)際上是個(gè)js文件), 這個(gè)js文件就是index.android.js

1480499270200.png

所以, 如果你想修改頁(yè)面的顯示內(nèi)容, 只需要修改index.android.js文件就可以了, 不需要再動(dòng)Android項(xiàng)目里的任何代碼了.

既然這樣, 那么我們的app也就只需要在模擬器或真機(jī)上部署一次, 以后如果要修改了js文件, 只需要Reload一下就可以, 不需要再次部署. 從而大大減少了重新編譯代碼的時(shí)間(經(jīng)常用Studio開(kāi)發(fā)的同學(xué)應(yīng)該理解這個(gè)痛吧)

1480427145920.png

使用什么開(kāi)發(fā)工具

由于以后幾乎不用寫(xiě)Java代碼了, 基本上都是寫(xiě)js腳本了, 所以開(kāi)發(fā)工具也得換一下了. 寫(xiě)js腳本的話開(kāi)發(fā)工具就選擇性比較大了, 有些哥們用vim來(lái)搞, 有些用記事本來(lái)搞. 當(dāng)然, 我們?yōu)榱颂岣咝? 并適當(dāng)?shù)玫讲糠痔崾竞透吡溜@示, 還是不要搞那么原始了. 目前前端開(kāi)發(fā)人員用的比較火的軟件叫做Sublime, 可以推薦給大家.

1480500072319.png

下載地址: http://pan.baidu.com/s/1skUPPMX
這是一個(gè)免安裝版, 可以直接運(yùn)行.

下一篇準(zhǔn)備介紹RN的基本語(yǔ)法, 敬請(qǐng)期待...