[React Native Android安利系列]搭建React Native Android環境

歡迎你們收看react-native-android系列教程，跟着本系列教程學習，能夠熟練掌握react-native-android的開發，你值得擁有
https://segmentfault.com/blog...

(PS，和聊一聊系列寫在一塊兒也實在是沒轍， 誰知道如何新建專欄，給我留個言.....)

React-Native的橫空出世，知足了前端工程師們的願景，擺脫了瀏覽器，前端開發者們又有了一個方向。可是本人認爲，ReactNative更像是套了一層前端殼子的原生開發，要想了解RN仍是須要多多理解原生開發的。廢話很少說，想了解更多的RN心靈雞湯，本身去百度就行了。

搭建react-native的文章雖然不少，但大多數都是搭建js層面的，沒有結合原生android和android開發去講。這一套教程，將會更多的結合原生的安卓去講react-native。

1. 環境

首先，咱們須要搭建一個開發環境。不管是window/mac/linux中的哪個，必需要具有的條件有如下幾點

1.1 安裝jdk

windows的話，在cmd中執行java -version看就行，mac/linux的話。在終端下，直接執行java -version命令進行查看，若是沒有，請百度"jdk安裝與環境變量配置"。直到使用java -version的時候，出現了以下圖所示的信息，則證實你安裝成功了(如圖1.1.1)。

圖1.1.1

1.2 安裝nodejs

nodejs的官網上有各個系統的下載包，window下能夠直接下載exe可執行的node，而後把node.exe所在的路徑，添加到環境變量中便可，這樣安裝更加乾淨。直到，在windows下的CMD，或者mac下的終端任意目錄下，輸入node，能夠出現如圖2.3.1所示便可。

圖2.3.1

1.3 安裝NPM

通常來說，安裝了nodejs，也會順帶着安裝上npm，不過有的時候，咱們須要單獨安裝，windows下，若是使用了node.exe的話，能夠自行百度一下 "windows安裝npm" 按照說明安裝npm，而且把npm添加到環境變量中去。直到在終端或者CMD任意目錄下，執行npm出現如圖1.3.1所示信息，則意味着，你安裝成功了。

圖1.3.1

1.4 安裝react-native-cli

這個工具是react-native的命令行工具，是咱們接下來運行工程的基礎。安裝的話，直接使用。

npm install -g react-native-cli

命令進行安裝便可，mac/linux下的話，可能會報錯：
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/react-native-cli'
這個時候，證實你的權限不夠，能夠在命令前面加上sudo：

sudo npm install -g react-native-cli

1.5 安裝android sdk

這裏建議把android studio與android sdk一塊兒安裝，android的官網上便可下載與安裝，有bundle版的話，更加的省事。

1.6 安裝安卓模擬器

若是有安卓手機的話，更推薦使用安卓手機進行真機調試，若是沒有的話，咱們也能夠經過安卓模擬器進行調試，windows的話，建議下載blue stack(下載安裝便可)，mac/linux的話，可使用android sdk裏面自帶的avd，建立新的設備進行調試。

2. react-native的helloworld

接下來，咱們從一個使用了android studio與react-native的hello world入手。開啓咱們的react-native-android之旅。

2.1 建立工程

咱們挑一個乾淨的文件夾來初始化咱們的工程。windows的話，經過dos命令行(程序中查找cmd進入)。linux/mac的話，經過bash進入到文件夾下，執行如下命令建立工程，如圖2.1.1

react-native init hellowReact

圖2.1.1
等待片刻，咱們會看到生成了一個新的項目(helloReact)，生成的項目裏面包含了IOS版本與Android版本的默認項目。

2.2 用android studio打開

此時咱們可使用android studio打開，新建項目下的android文件夾，如圖2.2.1所示。

圖2.2.1
打開工程後，咱們能夠看到下方開始編譯bundle，如圖2.2.2。

圖2.2.2
等待build gradle的過程比較漫長，須要耐心等待一下。build好以後，咱們就能看到在咱們的andriod studio中出現了新建的工程。
若是發現沒有build，那麼請看看控制檯，是否提示沒有安裝什麼gradle，若是是的話，點擊進行安裝便可，如圖2.2.3。

圖2.2.3

2.3 將安卓工程編譯並安裝到機器上

在準備就緒後，工程上方的工具欄，會出現能夠編譯的按鈕(如圖2.3.1所示)咱們點擊綠色的運行按鈕

圖2.3.1
若是使用了bluestack的話，請把bluestack打開，若是使用手機調試的話，請把手機的開發人員選項打開，而且把USB調試選項打開。咱們這裏直接使用了手機調試(如圖2.3.2的調試列表中出現了咱們鏈接的手機)。

圖2.3.2
不管你用哪一種方式，在點擊完綠色的運行按鈕以後，都會看到選擇設備的列表。選擇本身的設備，而後點擊OK。開始編譯(如圖2.3.3)。

運行完成以後，咱們果真看到了。。。。。。。BUG(如圖2.3.4)

圖2.3.4
不過，若是你運行到了這一步，恭喜你，你已經將react的安卓項目成功的編譯並安裝到手機上了。
出現這個BUG的緣由主要是因爲咱們的app調試階段回去遠程尋找咱們的js，而默認，它回去本地尋找，因此咱們接下來要幹兩件事情，1. 搭建能夠訪問js的服務。 2.讓手機上的react應用去按照這個服務尋找JS

2.4 搭建服務

用windows的CMD或者MAC/linux的終端，進入到hellowReact目錄下(咱們用react-native init建立的工程)，而後執行，結果如圖2.4.1：

react-native start

圖2.4.1

運行成功後，咱們看到react-native利用了本機的8081端口，開啓了一個js的服務，咱們訪問一下(結果如圖2.4.2所示)。
http://localhost:8081/index.a...
(PS:第一次訪問編譯會有點慢)

圖2.4.2

2.5 設置app尋找js的地址

接着，咱們要進行第二步---讓手機上的react應用去按照這個服務尋找JS
咱們打開手機上那個報錯的APP（hellowReact）,而後搖一搖。（是的，搖一搖，不過不是微信）此時會出現開發者工具，如圖2.5.1所示

圖2.5.1
固然，你要是使用bluestack的話，也行，左側工具欄裏面有搖一搖。
如圖2.5.2，點擊Dev Settings，點擊最下方的Debug server host & port for device，

圖2.5.2
會彈出配置項，這個配置項就是尋找js的地址啦：

那麼地址如何填呢？
若是是真機調試的話，手機最好和本身的電腦在一個局域網下（使用了同一個wifi也能夠），若是是bluestack的話，則不用管這個了。
windows電腦，請在CMD命令下，輸入ipconfig查看本身的ipv4地址。或者用電腦右下角的查看網絡鏈接，來查看本身的ipv4地址。若是是mac/linux的話，查看一下網絡設置，上面會有寫。本身的ip地址。
在配置項裏面填寫本身的ip地址:8081，如圖2.5.3

圖2.5.3

2.6 從新加載js，並運行成功

點擊肯定，返回主界面。再搖一搖手機，而後點擊reload js。運行結果如圖2.6.1

圖2.6.1
因而，咱們的hello world就大功告成啦，至此，咱們的React-Native-Android環境也算大功告成了。

上述講解，能夠在這裏找到代碼例子：

https://github.com/houyu01/re...不要走開，立刻回來，下一篇，咱們會介紹，如何在ReactNative中利用js編寫咱們想要的界面