總結rn必須的依賴安裝

必須準備的安裝依賴有：Node、React Native 命令列工具、Python2 以及 JDK 和 Android Studio。

雖然你可以使用任何編輯器來開發應用（編寫 js 程式碼），但你仍然必須安裝 Android Studio 來獲得編譯 Android 應用所需的工具和環境。

一、 開始安裝相關依賴環境

step1:安裝JDK,並且配置環境變數(JAVA_HOME)

從Java官網下載JDK並安裝。請注意選擇x86還是x64版本。 推薦將JDK的bin目錄加入系統PATH環境變數。具體步驟可以百度搜索【JDK安裝與環境變數配置】 檢視是否安裝成功： cmd ==》輸入命令：java -version 提示如下圖表示成功：

step2: 安裝Android studion 及SDK

1、在官網下載Android studio

請注意選擇x86還是x64版本。（國內網路不能訪問，可以使用翻牆軟體，我使用的是：lantern，需要的可以自己去下載）

2、安裝完成後：在SDK Platforms視窗中，選擇Show Package Details，然後在Android 6.0 (Marshmallow)中勾選Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image

3、.在SDK Tools視窗中，選擇Show Package Details，然後在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1（這個必須版本嚴格匹配23.0.1）、Android Support Library、Android Support Repository

推薦使用騰訊Bugly的映象加速下載。檢視說明

4、環境變數設定

推薦將SDK的platform-tools子目錄加入系統PATH環境變數。 最後，把ANDROID_HOME環境變數設定為你sdk所在目錄。

step3、安裝node.js配置npm

1、從官網

下載node.js的官方8.3.x版本或更高版本

注意：node 的版本必須高於 8.3 不知道安裝步驟的可以參考：npm安裝教程 推薦：由於npm在國內的速度奇慢，建議使用淘寶代理，或者使用其他科學上網工具 使用淘寶代理的方法： npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global

step4、安裝Python

從官網下載並安裝python 2.7.x（3.x版本不行）

step5、安裝react-native命令列工具（react-native-cli）

安裝命令：npm install -g yarn react-native-cli 安裝成功之後，開啟cmd.exe,輸入 react-native -v ,然後enter,如果能成功返回react-native的版本號，則說明安裝成功。

step6、安裝git for windows

在這裡下載安裝，安裝過程中注意選擇"Run Git from Windows Command Prompt"。 到這裡環境依賴安裝基本完成！！！！！！！！！

二、建立專案,並執行

1、建立專案

開啟cmd,切換 到你希望建立專案的目錄，比如我建立在E:\reactProject 輸入命令：react-native init ReactTest，其中ReactTest是專案的名字,需要花費時間請耐心等待數（或數十）分鐘， 如下圖： 這裡表示專案已經建立成功了，開啟E:\reactProject\ReactTest就可以看到剛剛建立的專案目錄

2、專案理解

從上面步驟1中得到rn相關的project結構路下圖： 其中關鍵的檔案有： android資料夾，就是一個可以用android studio開啟的android專案。 ios資料夾，是一個可以用xcode開啟的ios專案。 index.js，這是React Native入口檔案。 package.json，類似android studio的build.gradle，你依賴的庫都寫在裡面。 node_module資料夾，你依賴的庫下載下來都存放在裡面，屬於git的忽略檔案，你要找的依賴庫原始碼也在裡面，包括React和React Native。 這裡需要著重理解的是：

1、package.json

package.json，類似於android studio中的build.gradle新增遠端依賴，不同的是，package.json大多數時候不需要我們手動新增，我們只需要在根目錄通過命令列，npm install xxxxxx --save 就可以依賴一個庫了。 install之後，庫的依賴資訊，自動被寫到package.json裡面，對應的庫也會被下載到node_module資料夾中，類似android studio依賴後把aar同步到本地

2、node_module

node_module是一個忽略檔案，提交的時候不需要提交到git上，類似android studio遠端依賴下來的aar，也不會提交到git上。其他人在使用React Native專案時，只需要npm install，工程就會根據package.json，去同步下載各個依賴庫到node_module。 注意：有時候還需要執行react-native link 或 react-native link xxx，這是因為有些第三方庫是通過原生程式碼加React Native實現的，通過這個命令，可以自動把相關的配置程式碼，自動新增到android和ios工程中。

3、android 開發需要理解的React Native

1)、React Native 其實是執行在ReactActivity上

一般情況下只在一個activity上執行，一般情況下是因為，你也可以自己寫新的Activity，繼承ReactActivity來實現你想要的邏輯。

2）Application預設建立工程時，就會繼承ReactApplication

其中getPackage()就是返回需要與原生互動的包，MainReactPackage時初始化生成，其他是你react-native link命令時幫你插入的。當然，你也可以自己寫與原生互動的模組。

3）路由（頁面跳轉）

React Native預設是執行在一個Activity上，那麼頁面之間的跳轉自然不是Activity之間的跳轉，而是通過** Navigator**來實現跳轉的。 是的，Navigator是用來做跳轉的，通過場景（Scene）來指定跳轉物件。這裡Scene類似Intent的作用，告訴Navigator我要去哪裡，Navigator負責場景推入和退出。（推薦使用react-native-router-flux框架實現）。

4）state，狀態

更新介面，修改顯示，載入資料，使用者互動，都是靠它，它是整個React Native的核心之一，React Native元件的state變化了，那麼它就會重新渲染，所以維護state，通過資料或者動作更新state等，是React Native的重點，也是和原生很大差異的地方。 所以你就看到redux這個東西，也許第一次接觸你會覺得它很難理解，但是你只需要知道，它的核心就是讓你更好的維護React的state，統一管理和處理state，所以後期redux-thunk會成為你React Native的管理利器。當然，如果元件或專案不復雜，完全不必要接觸它。“元件的state改變了，所以介面變化了。”

5）編譯除錯

編譯其實很簡單，android其實就是在專案的根目錄終端輸入react-native run-android就可以編譯安裝 當前，剛剛接觸React Native，執行不起來是常有的事情，百度谷歌一個一個解決就好了，大部分時候都是忘記npm install，react-native link，ip不對，node服務沒有重新啟動等等

3、執行專案

我使用的是真機除錯

1、切換到上面建立專案的跟目錄ReactTest

2、輸入命令：npm install

這裡需要花費時間，請耐心等待

2、命令：react-native start 執行packager

可以用瀏覽器訪問http://localhost:8081/index.bundle?platform=android看看是否可以看到打包後的指令碼（看到很長的js程式碼就對了）。第一次訪問通常需要十幾秒，並且在packager的命令列可以看到形如[====]的進度條。 注意老版本（低於0.49）的地址為http://localhost:8081/index.android.bundle?platform=android 如果你遇到了ERROR Watcher took too long to load的報錯，請嘗試修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js，將其中的MAX_WAIT_TIME 從25000改為更大的值（單位是毫秒）

3、安卓執行

保持packager開啟，另外開啟一個命令列視窗，然後在工程目錄下執行 react-native run-android 成功效果圖如下： 注意： 首次執行需要等待數分鐘並從網上下載gradle依賴。（這個過程螢幕上可能出現很多小數點，表示下載進度。這個時間可能耗時很久，也可能會不停報錯連結超時、連線中斷等等——取決於你的網路狀況和牆的不特定阻斷。總之要順利下載，請使用穩定有效的科學上網工具。）執行完畢後可以在模擬器或真機上看到應用自動啟動了。

如果apk安裝執行出現報錯，請檢查上文中安裝SDK的環節裡所有依賴是否都已裝全，platform-tools是否已經設到了PATH環境變數中，執行adb devices能否看到裝置。

至此，應該能看到APP紅屏報錯，這是正常的，我們還需要讓app能夠正確訪問pc端的packager服務。 搖晃裝置或按Menu鍵（Bluestacks模擬器按鍵盤上的選單鍵，通常在右Ctrl的左邊 或者左Windows鍵旁邊），可以開啟除錯選單，點選Dev Settings，選Debug server host for device，輸入你的正在執行packager的那臺電腦的區域網IP加:8081（同時要保證手機和電腦在同一網段，且沒有防火牆阻攔），再按back鍵返回，再按Menu鍵，在除錯選單中選擇Reload JS，就應該可以看到執行的結果了。

如果真實裝置白屏但沒有彈出任何報錯，可以在安全中心裡看看是不是應用的“懸浮窗”的許可權被禁止了。

致辭：以上是自學react-native建立執行第一個專案的流程總結記錄，有需要的可以看看，同時也方便自己以後回頭檢視，至於react-native js使用的開發工具會在後續新建一篇部落格詳解記錄，有興趣的歡迎持續關注哦！！！！