環境安裝准備（以下安裝的軟件可選擇到其他盤，不一定非得C盤，建議各軟件安裝的路徑都不要出現中文）：
安裝包:Node.js
下載地址：https://nodejs.org/en/ ，點擊DOWNLOADS，點擊圖中所示下載后直接安裝，注意：安裝路徑可自選，但千萬不要出現中文字符
Python2.7
下載地址：https://www.python.org/downloads/release/python-2715/，在下面找到圖中所圈中的位置，電腦是64位的點擊第一個，32位的點擊第二個
Jdk1.8
下載地址：https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html，找到如圖所示位置，電腦是32位機的點擊第一個，64位點第二個。
在安裝jdk時，建議在安裝路徑中新建兩個子文件夾，一個jdk，一個jre，因為jdk在安裝過程中會安裝兩次，第一次是安裝jdk，第二次是jre，存放目錄如：
Java> jdk
jre
注意，安裝完之后還要配置環境變量，配置教程http://10.0.0.211/?oriurl=http://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html，
win10java環境教程：
https://jingyan.baidu.com/article/db55b609fa946e4ba20a2f56.html
Adb Tools
下載地址：http://adbshell.com/downloads ，點擊ADB Kits(525KB)下載解壓即可，添加完成后同樣要配置環境變量，右鍵我的電腦à高級系統設置à環境變量，選擇第一個框中的PATH，在最后添加adb解壓后的路徑（前面如果沒有;就加一個;有就不需要），adb的路徑是包括adb.exe的文件夾絕對路徑，如D:\adb Tools\。
軟件:
Cmder
下載地址：http://cmder.net/，找到下面的Download Full藍色按鈕，點擊下載后解壓完成。
Vscode
下載地址：https://code.visualstudio.com/docs/?dv=win，下載完成后安裝即可。
Git
下載地址：https://git-scm.com/download/win，如圖，32位的電腦點擊框中第一個鏈接，64位的點擊第二個
下載后再安裝過程中，有一步需要改動，如下圖，選擇使用vscode作為默認編輯器
網易MuMu模擬器
下載地址：https://adl.netease.com/d/g/a11/c/gw，下載完安裝即可。
Expo xde
下載地址：https://xde-updates.exponentjs.com/download/win32，下載完安裝即可。
步驟
1、 在以上等軟件下載安裝完成后，新建一個存放ReactNative的代碼的文件夾，路徑中同樣不要出現中文，如D:\RNcode,同時電腦保持聯網狀態。
2、 在瀏覽器打開ReactNative官網https://reactnative.cn/ ，點擊藍色“搭建環境”按鈕，在點擊下面的右邊的選項卡“簡易沙河環境”，復制語句 :
npm install -g create-react-native-app
用管理員身份打開cmder.exe，粘貼上面復制的語句npm install -g create-react-native-app按回車鍵（Enter鍵）運行，結尾出現類似added 28 packages in 69.063s即為成功（注：上面所輸出的內容中的路徑是create-react-native-app的安裝路徑）。
另外，如果在安裝過程中因某些原因中止導致失敗，那么在cmder中運行命令：npm cache clean --force來清除緩存，然后再次運行npm install -g create-react-native-app。
3、 在cmder中切換到存放ReactNative代碼的文件夾中，如cd D:\RNcode，運行命令：
create-react-native-app AwesomeProject
來創建一個新的項目，其中AwesomeProject是項目名稱，前面記得有個空格，項目名可自定義。（創建第一次耗時會比較長）
在創建過程中，如果因為網絡中斷等原因創建失敗，出現紅色的ERR字眼時，則只需按Ctrl+c終止，然后將創建一般的文件夾刪除后再重新運行創建項目語句create-react-native-app AwesomeProject即可
4、 在cmder輸入adb后回車查看是否出現有關adb的信息出來，如果沒有就去確認一下是否下載了adb tools以及是否添加到了環境變量中去（注：adb tools的路徑中不能有中文）
5、 打開已安裝的網易MuMu模擬器，點擊桌面系統設置的設置，滑動找到開發者選項，點擊進去，打開USB調試選項
6、 在cmder中切換到所建項目文件夾下，然后輸入 adb connect 127.0.0.1:7555 （注意：此處的7555端口是網易MuMu模擬器的端口，如果這里沒有安裝網易MuMu模擬器而是安裝其他手機模擬器的話，則需要自行百度找出該模擬器的交互端口，並替換掉該命令中的7555為自定義模擬器的端口）。
7、 接着上一條命令，再輸入 adb devices命令查看是否正確連接成功，出現有類似
List of devices attached
127.0.0.1:7555 device
即表示成功連接到模擬器設備。
8、 在項目文件夾下，輸入npm start
出現提示press a…. (此過程較久，如果沒反應了，則重啟cmder和網易MuMu模擬器，從第6步驟開始重新做起)時，按下a繼續，同時，在網易MuMu模擬器中，點擊系統應用à設置à應用，點擊右上角的齒輪圖標，在“其他應用的上層顯示”中，當出現expo時，點擊運行顯示，然后在模擬器首頁就可看到expo，此時雙擊，當界面轉為豎屏並且中間顯示幾行英文字母時就表示成功。（注：如果在按a那里出現不成功時，可以再按a測試，多試幾次，如果一直不成功，則按ctrl+c中止，重新開始第8步）。
-----****----至此，設備的聯通就已經完成，接下來就是編輯器的配置及組件的安裝，注意，以下步驟依舊是在聯網的狀態下進行---***----
9、 百度Eslint，進入其官網（https://eslint.org/ 建議收藏該網站），點擊導航欄中Demo中下拉框中的ESLint Demo便可進入如下界面，這是個在線ESMA代碼測試網站，可在圖中的”2“區位置寫代碼調試。
點擊上圖的”3”的位置，會出現下圖情況，顯示出各種可選環境搭配設置，可以根據需求進行環境選擇，選擇完成后還可滑動到最下面，點擊Download .eslintrc.json file with this configuration 就可以將已選擇好的環境配置的.json下載下來供后續使用。
10、 打開vscode，初次打開，會顯示幾條消息，一條是按照為中文菜單（漢化），第二個可以省略，還有一個是查詢是否安裝了git，沒有安裝會提示安裝，也可以忽略后手動下載安裝。這些消息有時可能因為網速問題沒顯示，如果沒有顯示漢化消息或不小心叉掉了，可按照下面步驟自行手動漢化：
首先，按Ctrl+Shift+p快捷鍵彈出 如下圖紅框中所示搜索框；
然后在里面輸入“configure language”后回車，會顯示出一個文本，看到里面的”locale“:”en”，將里面的”en”改為”zh-cn”，然后按ctrl+s保存；
接着，在左邊工具欄點擊那個方形按鈕，如下圖
在接下來顯示的頁面中，在搜索框中輸入“language”，然后下下面的列表中找到有“中文簡體”字眼的一項，點擊install安裝（由於已經先漢化過，所以上圖顯示為中文，未漢化版本顯示是install），安裝完成后點擊重新加載，vscode重啟進入后就變成中文版的。
11、 在存放代碼目錄下新建一個Eslint文件夾，然后在vscode中，點擊 文件à打開文件夾，然后選擇前面建立的Eslint文件夾打開，
在Eslint文件夾下新建幾個文件：index.html，main.css，main.js，.eslintrc(注意前面有個“.”)，用於后面的代碼測試插件是否安裝及環境是否設置正確。
可將Eslint官網中Demo下ESlint Demo的代碼示例 var foo = bar; 復制到main.js中然后保存。
12、 （開始之前可以給個建議就是直接運行npm install -g eslint（全局安裝eslint）而不要npm install eslint --save-dev(局部安裝) 這樣在后續的任何一個項目就不用再進行局部安裝，不過，因為是全局安裝，在后面為了也能支持檢測html代碼而需要全局安裝npm install -g eslint-plugin-html，這些都是作者自述，讀者可不理會）打開cmder,切換到Eslint目錄中，瀏覽器回到Eslint官網首頁，點擊Get Started>>按鈕，在下面找到語句npm install eslint --save-dev ，將其復制到cmder中運行，出現有
+ eslint@5.6.0
added 126 packages in 84.896s
即為安裝成功，然后再cmder輸入eslint命令，如果顯示“'eslint' 不是內部或外部命令，也不是可運行的程序”，那么就再運行命令“npm install -g eslint”進行全局安裝，出現類似
C:\Users\keng\AppData\Roaming\npm\eslint -> C:\Users\keng\AppData\Roaming\npm\node_modules\eslint\bin\eslint.js + eslint@5.6.0
added 126 packages in 31.52s 即為成功(上面顯示的是安裝路徑)，此時再輸入eslint應該是顯示出一堆有個eslint使用說明的英文條目。
13、 在ESlint官網的當前頁面中，繼續往下看，在Configuration 的大標題下面找到以下內容：
"extends": "eslint:recommended"
將其復制到Eslint文件夾中的.eslintrc中，用大括號括起來，然后保存，如下圖。
14、 （此步驟是為調試好eslint的環境）
在cmder的Eslint目錄下，輸入eslint main.js命令，此時會出現
1:5 error 'foo' is assigned a value but never used no-unused-vars
1:11 error 'bar' is not defined no-undef
✖ 2 problems (2 errors, 0 warnings)
的錯誤提示，在vscode中輸入“var bar = 1;”，再ctrl+s保存，回到cmder再次運行eslint main.js，此時錯誤提示變成了一個
3:1 error 'document' is not defined no-undef
✖ 1 problem (1 error, 0 warnings)
那么再回到vscode中，為.eslintrc的大括號之內，“"extends": "eslint:recommended"”之后添加一個“,”，回車補充：
"env":{
"browser":true
}
保存后，.eslintrc的內容為：
再在main.js中添加一句“document.write(foo); ”后保存，此時main.js內容如下：
再再次在cmder中輸入 eslint main.js，依舊出現錯誤
1:5 error Parsing error: Unexpected token bar
✖ 1 problem (1 error, 0 warnings)
此時，瀏覽器中去到Eslint官網下導航欄的Demo，點擊Eslint Demo，再如圖點擊第3步，下面的內容出現后按圖選擇ECMA Version為6，browser的勾打上；
然后滑倒最下面，點擊Download .eslintrc.json file with this configuration下載配置文件eslintrc.json（可以把配置文件放到Eslint文件夾下），然后用vscode打開，將下圖的代碼部分拷貝到.eslintrc的大括號中，前面的“env”一行后面加“,”回車補充
"parseOptions":{
"ecmaVersion": 6,
"sourceType": "script",//這兩行可
"ecmaFeatures": {} //以不用添加
}
把main.js的var改為let
最后的.eslintrc文件的內容如下：
此時回到cmder輸入eslint main.js就不會報錯了
15、 回到vscode，如下圖點擊左邊工具欄最底下的方形按鈕或者按快捷鍵：ctrl+shift+x，安裝3個輔助插件（此處已經安裝好了，截圖的內容可能會有點出入，但插件名稱無誤）
在彈出的頁面搜索框中輸入eslint（提供語法檢測功能），出現如下圖圈中的，點擊安裝
再輸入prettier（代碼格式化工具），出現圖中所圈，也就是搜索結果第一項，點擊下載
最后輸入react native tools，選擇安裝圖中所示的搜索結果。
16、 （此步驟為了使eslint的語法檢查支持html文件）
在百度搜索github，點擊進入官網（github.com），在github界面的搜索欄中輸入
awesome-eslint，點擊第一個搜索結果項；
在進入之后，按ctrl+f，在彈出下圖位置1的搜索框中輸入“HTML”，頁面會跳轉到出現HTML字樣的地方，點擊該HTML，如圖中2所示
點擊HTML進入該子頁面中后，滑動找到下圖所示位置的代碼，
"plugins": [
"html"
]
將其復制到Eslint文件夾下的.eslintrc的大括號中，上一句“parseOptions”的結尾大括號補充“,”，.eslintrc的內容如下：
在vscode界面點擊上面的文件à首選項à設置，
在彈出的界面中，在搜索框中輸入eslint.v，界面跳轉到下圖2的位置時，鼠標放置在2區域時左邊的筆的圖標會出現，點擊筆圖標，選擇在設置中替換，就會出現5位置所示
打開Eslint文件夾中的main.js和index.html，看到有錯誤提示就為成功
點擊下圖中的左下角地方就會出現右方的錯誤信息
17、 在cmder中切換到上次新建的文件夾項目，運行命令npm install eslint --save-dev，
然后再輸入npm install -g eslint-plugin-html
在vscode中，打開項目文件夾下的App.js，將最下面的“const style”部分移動到前面第三行的位置，如圖，保存。
回到cmder中，輸入eslint –init（注意，這里是兩個-），回車后，通過上下鍵移動選項，選擇第一項，然后繼續選擇第一項Airbnb,出現提示按（y/s）輸入y，在繼續選擇Javascript，再次詢問時依舊輸入y，最后出現類似
added 21 packages and updated 1 package in 44.427s
Successfully created .eslintrc.js file in D:\Android\ReactNativeCode\helloRN
即為成功
在項目文件夾中修改.eslintrc.js文件，在里面填入以下代碼:
module.exports = {
"extends": "airbnb",
"rules":{
"react/prefer-stateless-function":0,
"react/jsx-filename-extension":0
}
};
——————————————————————————
"react/prefer-stateless-function":0,這么設置是因為通過查看的錯誤，按照錯誤的提示添加規則，將錯誤設置為0，就是無視錯誤就用於解決報錯。
文件如下：
18、 百度搜索“碼雲”，進入碼雲官網（https://gitee.com/ ），注冊賬號，注冊完成后，點擊如下圖的菜單欄中的“+”新建一個倉庫
19、 在vscode中，打開上次新建的ReactNative的項目的文件夾(切記只是已經建好的項目文件夾，不是整個存放reactnative代碼的文件夾)，如圖，然后點擊左下角的圖中圈中的（有個圓圈中間是個X還有個三角形中間是個感嘆號的）按鈕，就會出現右下方的彈框，然后再點擊終端，看到類似命令行的界面。
20、 再點擊左側的第三個按鈕（類似於剪刀的Y字形按鈕），然后點擊彈出界面的右上角，選擇你的項目文件夾，選擇初始化，就會出現類似下圖的樣子
(另外，有時有些同學的界面中沒有出現如上圖所示的結果，反而彈出的界面是沒什么內容，如圖 ，，那就重裝一下git,同時vscode要關閉，在安裝git時，記得選擇使用vscode為默認編輯器，如下圖
安裝完成后啟動vscode，稍等片刻后應該就會出現一個方形按鈕，或者直接正常顯示就行了，然后就繼續本步驟操作。）
21、 在右下方的終端區域中，輸入 git init ，出現了類似Reinitialized existing Git repository in D:/Android/ReactNativeCode/.git/ 的就OK。
22、 在碼雲網站中，點擊“+”，點擊個人主頁，在右側選擇項目后點擊在下面的前面新建好的倉庫
在彈出的新界面中，點擊橙色的“克隆/下載”按鈕，再點擊下面出現的復制按鈕來復制你的倉儲網址（如果按鈕沒反應也可以手動復制框中的網址）
23、 復制完后回到vscode，在終端區域輸入git remote add origin 復制的網址地址 ，然后回車。
24、 再輸入 git pull origin master 就可以將倉庫中的文件（因為是新建的，所以只有一個README.md文件）下載到當前的目錄下（即項目文件夾下），因為項目文件夾中本來就有一個README.md，下載下來的會因為重名覆蓋，所以可以把項目文件夾的本來的READ.md改名如READ.old.md，再執行git pull origin master，就可以看到效果區別。
25、 接下來繼續輸入兩條命令進行配置：
git config --global user.name '用戶名'
git config --global user.email '郵箱地址'
26、 再在左側第三個按鈕的界面里的搜索框中輸入 init，點擊上面的勾，再選擇是就行了。
完成后出現如下圖的界面，點擊那三個點，然后選擇推送（pull），然后在彈出的框中輸入用戶名（注冊用的手機號碼或郵箱賬號）和密碼，在彈出的提示消息選擇是就行；或者是在終端區域輸入git push origin master回車，然后輸入用戶名（注冊用的手機號碼或郵箱賬號）和密碼就可以將本地的文件上傳到碼雲的代碼倉庫。
27、 打開安裝好expo XDE，注冊賬號並登錄，選擇project->打開項目文件夾來打開前面已經創建好的項目文件夾如helloRN，如下圖所示，按步點擊方框中的或者看到圈中的直接點圈中的然后選擇你的項目文件夾
28、 打開網易mumu模擬器並用adb連接，具體步驟看第6步
29、 在XDE中點擊齒輪圖案的按鈕，修改host的為LAN，
點擊device的 open on android，在網易mumu模擬器里點擊桌面的expo后上應該會運行彈出app界面，等效於npm start）
30、 在vscode中的拓展里找到react native tools，找到右邊的詳細信息，找到里面的npm install -g react-native-cli，復制到cmder運行
出現類似下面的即為成功
C:\Users\keng\AppData\Roaming\npm\react-native -> C:\Users\keng\AppData\Roaming\npm\node_modules\react-native-cli\index.js（安裝位置）
+ react-native-cli@2.0.1
added 41 packages in 37.191s
（下面的 Using expo標題 ，點擊下面的We support using Expo to run, debug and publish applications. For more information on Expo, see here.
For more details about configuring and debugging Expo applications see Expo docs的第二個藍色字就是 Expo docs 進入瀏覽器瀏覽（網址https://github.com/Microsoft/vscode-react-native/blob/master/doc/expo.md）就可以看到關於expo的介紹）
31、 點擊vscode中左邊的第四個按鈕（蟲子加斜杠圖案），選擇上面的沒有配置，選擇添加配置
選完再在右邊的齒輪選擇react native，看到出現個launch.json，點擊保存，在當前的項目文件夾就看到了這個文件。
32、 關閉vscode和expo XDE重啟，依舊是vscode中左邊的第四個按鈕（蟲子加斜杠圖案），選擇圖中所示的最后一個Debug in Exponent，然后點擊綠色三角按鈕
運行后將會看到下圖結果，然后再次執行29步驟，之后就會看到最底下的藍色變成橙色。（如果沒變成橙色的話多試試幾次本步驟）
33、 在目錄下的.expo下打開package-info.json，看到packagePort：19001（不同機子可能會有所不同，如19006，以自己機子的為主），
點擊文件->首選項->設置，在搜索框中搜索react native packager
將圖中用戶設置和工作區設置的8081修改為前面看到的端口號19001，結果如下：
(可能因為版本關系，如果有人的界面不同於以上兩圖，也是找到React-native Package：Port關鍵字，點擊左邊的筆按鈕復制到用戶設置和工作區設置修改保存即可)
34、 重啟vscode，打開項目文件夾，vscode中左邊的第四個按鈕（蟲子加斜杠圖案），選擇綠色三角右邊的為Attach to packager，底部狀態欄應該有start packager
在expo XDE中點擊右邊的Device的Open on Android，項目在網易mumu模擬器運行后點擊下面的搖一搖出現如下界面（如果搖一搖出不來，多試幾次）
出現后選擇第二項，回到vscode會顯示如下界面
然后在里面輸入“configure language”后回車，會顯示出一個文本，看到里面的”locale“:”en”，將里面的”en”改為”zh-cn”，然后按ctrl+s保存；