React-native 環境配置過程與搭建項目問題匯總
首先，最好參照來源當然是來自於開源代碼本身的文檔：
https://reactnative.cn/docs/getting-started/
一、初始環境搭建
1.環境組件
由於從網上查找React-native的搭建版本是0.48，我就還通過win10的powerShell安裝了 -Chocolatey
Chocolatey是一個 Windows 上的包管理器，類似於 linux 上的yum和 apt-get。 你可以在其官方網站上查看具體的使用說明。一般的安裝步驟應該是下面這樣：
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString(‘https://chocolatey.org/install.ps1‘))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
就是直接上述這串文本復制到powerShell中運行即可。
這個工具可以幫助我們去下載React-native 環境配置的一些必要的組件
Python 2 （必要組件1）
打開命令提示符窗口，使用 Chocolatey 來安裝 Python 2.
註意目前不支持 Python 3 版本。
choco install python2
Node（必要組件2）
打開命令提示符窗口，使用 Chocolatey 來安裝 NodeJS。
choco install nodejs.install
但是0.56的版本文檔中。這個chocolatey已經不是一定要使用的了。只需要個人自行去下載指定版本以上的組件即可
我們建議直接使用搜索引擎搜索下載 Node 、Python2 和Java SE Development Kit (JDK) 註意 Node 的版本必須高於 8.3，Python 的版本必須為 2.x（不支持 3.x），而 JDK 的版本必須是 1.8（不支持 1.9）。
2.接著就是React-native的主要命令行工具
Yarn、React Native 的命令行工具（react-native-cli）
Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模塊的下載。React Native 的命令行工具用於執行創建、初始化、更新項目、運行打包服務（packager）等任務。
npm install -g yarn react-native-cli
安裝完 yarn 後同理也要設置鏡像源：
yarn config set registry https://registry.npm.taobao.org --global yarn config set disturl https://npm.taobao.org/dist --global
安裝完 yarn 之後就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方庫名代替npm install --save 某第三方庫名。
3.最後當然android必不可少的編譯環境Android studio
這邊需要Android studio2.0以上。。至於怎麽安裝就不在這裏贅述了。
二、創建初始項目
react-native init AwesomeProject
以上就創建項目名為AwesomeProject的操作，同樣是在powerShell中執行。
一大串的執行命令之後，就會在執行的目錄下創建了AwesomeProject文件夾：如下
這樣已經生成了一個最簡單的RN項目，其中android文件下的，就和android studio創建的項目是一致的
cd AwesomeProject react-native run-android
然後可以通過USB連接好手機，將項目跑起來。
三、項目運行問題（踩坑與填坑）
- SDK location not found問題。 android項目指定的SDK路徑沒找到
、
解決辦法:
此時說明我們android項目沒有找到指定SDK的配置，所以我們可以從原有的android studio項目中，找到【local.properties】復制到RN項目android的根目錄下，
主要就是local.properties中配置了有SDK的路徑
sdk.dir=E\:\\XXX\\xxx\\sdk
這時候重新用react-native run-android 運行項目即可.
- 紅色界面-Unable to load script from assets
原因：因為 android/app/src/main 文件目錄中缺少 assets.
解決辦法:
1，在 android/app/src/main 目錄下創建一個 assets空文件夾
mkdir android/app/src/main/assets
2，在項目根目錄運行
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
實際上操作就是處理根目錄的index.js，最後在assets目錄中生成兩個文件
index.android.bundle
index.android.bundle.meta
就我理解，應該實現android設備與PC的js server進行溝通中介。以後有空再詳細看看。
- powerShell執行react-native bundle（上一條問題的命令）時，出現Unable to resolve module `AccessibilityInfo`
---解決辦法:
具體原因可能是 react-native: 0.56.0有漏洞導致的。
所以我們需要安裝一個穩定版本
react-native應該是0.55.4 比較穩定，react-native-cli 聽一群裏的大神說使用1.2.0更穩定，所以我把這舊版的都先uninstall了。
那就幹吧，分別執行以下命令（註意噢，這樣全局執行）：
npm uninstall -g react-native-cli
npm install [email protected]
npm install -g [email protected]
react-native init --version="0.55.4" KAwesomeProject
就是利用0.55.4版本重新創建一個項目。
參照https://blog.csdn.net/aceaddi/article/details/81148585
- 紅色界面-could not connect to devolopment server - e.g. 10.0.1.1:8081
此時是有由於調試手機沒有和本地開發服務器連接在一起。從官網的文檔可知
(Android 5.0及以上)使用adb reverse命令
註意，這個選項只能在5.0以上版本(API 21+)的安卓設備上使用。
首先把你的設備通過USB數據線連接到電腦上，並開啟USB調試（關於如何開啟USB調試，參見上面的章節）。
- 運行
adb reverse tcp:8081 tcp:8081 - 不需要更多配置，你就可以使用
Reload JS和其它的開發選項了。
(Android 5.0以下)通過Wi-Fi連接你的本地開發服務器
- 首先確保你的電腦和手機設備在同一個Wi-Fi環境下。
- 在設備上運行你的React Native應用。和打開其它App一樣操作。
- 你應該會看到一個“紅屏”錯誤提示。這是正常的，下面的步驟會解決這個報錯。
- 搖晃設備，或者運行
adb shell input keyevent 82，可以打開開發者菜單。 - 點擊進入
Dev Settings。 - 點擊
Debug server host for device。 - 輸入你電腦的IP地址和端口號（譬如10.0.1.1:8081）。在Mac上，你可以在系統設置/網絡裏找查詢你的IP地址。在Windows上，打開命令提示符並輸入
ipconfig來查詢你的IP地址。在Linux上你可以在終端中輸入ifconfig來查詢你的IP地址。 - 回到開發者菜單然後選擇
Reload JS。
- 紅色界面-response error code 500
四、項目成功運行。
React-native 環境配置過程與搭建項目問題匯總