React Native (簡稱RN)是Facebook于2015年4月開源的跨平台移動應用開發架構，是Facebook早先開源的UI架構 React 在原生移動應用平台的衍生産物，目前支援iOS和Android兩大平台。
RN的環境搭建在RN的中文社群有所介紹，但是對于小白來說還是有些太過簡略了。RN中文社群詳見參考，本文不涉及的問題也許在其中能夠有所解答。
React Native思想
底層引擎是 JavaScript Core，但調用的是原生的元件而非 HTML5 元件。這樣運作時可以做到與 Navive App 相媲美的性能體驗，同時因為 JavaScript 代碼可以使用後端強大的 Web 方式管理，既可以做到高效開發，也可以實作快速部署和問題熱修複。
搭建開發環境（Windows）
React native目前支援三大平台（Windows、macOS、Linux）搭建開發環境，在此隻介紹一下Windows下環境的搭建，其他平台可參照官方網站
- 1 Chocolatey
Chocolatey是一個Windows上的包管理器，類似于linux上的yum和 apt-get。 你可以在其官方網站上檢視具體的使用說明。一般的安裝步驟應該是下面這樣：cmd以管理者身份運作
然後在其中輸入：
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
- 2 Python 2
關閉之前的cmd，再次打開指令提示符視窗，使用Chocolatey來安裝Python 2，輸入：
choco install python2
- 3 Node
使用Chocolatey來安裝NodeJS，輸入：
choco install nodejs.install
安裝完node後建議設定npm鏡像以加速後面的過程，cmd中輸入：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
- 4 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
- 5 Android Studio
Android Studio需要Java Development Kit [JDK] 1.8（暫不支援更高版本）。你可以在指令行中輸入 javac -version來檢視你目前安裝的JDK版本。如果版本不合要求，則可以到官網上下載下傳或者自行百度查找，配置好環境變量。
Android Studio包含了運作和測試React Native應用所需的Android SDK和模拟器（真機）
除非特别注明，請不要改動安裝過程中的選項。比如Android Studio預設安裝了 Android Support Repository，而這也是React Native必須的（否則在react-native run-android時會報appcompat-v7包找不到的錯誤）。
- 确定所有安裝都勾選了，尤其是Android SDK和Android Device Emulator。
- 在初步安裝完成後，選擇Custom安裝項：
- 檢查已安裝的元件，尤其是模拟器和HAXM加速驅動。
- 安裝完成後，在Android Studio的歡迎界面中選擇Configure | SDK Manager。
- 在SDK Platforms視窗中，選擇Show Package Details，然後在Android 6.0 (Marshmallow)中勾選Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
- 在SDK Tools視窗中，選擇Show Package Details，然後在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1（必須包含有這個版本。當然如果其他插件需要其他版本，你可以同時安裝其他多個版本）。然後還要勾選最底部的Android Support Repository
- 接下來就可以搭建并測試第一個Android studio 項目了。new project
- 值得一提的是Android版本的，記得選擇Android 6.0，之前選取的工具都是與之對應的。
- 選擇empty activity
- Finish之後，就進入了漫長的項目配置過程，加載到項目後，還需初始化一些東西。在android studio底部可以看到。首次運作需要等待數分鐘并從網上下載下傳gradle依賴。（個時間可能耗時很久，也可能會不停報錯連結逾時、連接配接中斷等等——取決于你的網絡狀況和牆的不特定阻斷。總之要順利下載下傳，請使用穩定有效的科學上網工具。），你可以百度資源，所需的gradle包在gradle-wrapper.properties中，
（小白入門）Windows環境下搭建React Native Android開發環境 - 下載下傳完成後，把zip放置在gradle目錄中，C:\Users\A\.gradle\wrapper\dists，一般在自己的磁盤下搜尋 .grale就可以查到目錄，這個目錄最好先讓android studio 自己生成好後，取消自己fetch檔案，然後自己去下載下傳好gradle-xxx-all-zip檔案，放到對應的目錄下：
- 例如我要3.3版本的放在C:\Users\Administrator\.gradle\wrapper\dists\gradle-3.3-all\55gk2rcmfc6p2dg9u9ohc3hw9下然後C:\Users\Administrator\.gradle\caches\3.3下，讓android studio自己fetch ,這樣的速度就快了.
- 配置完成後的大概目錄是這樣：
- 在右上角的 可以建立Android模拟器
（小白入門）Windows環境下搭建React Native Android開發環境
- 點選 運作，選擇模拟器或真機，運作成功如圖。
（小白入門）Windows環境下搭建React Native Android開發環境
Android studio主要還是提供React Native所需要的一些環境，RN開發我所用的是VSCode
- ANDROID_HOME環境變量
- 確定ANDROID_HOME環境變量正确地指向了你安裝的Android SDK的路徑。 打開控制台 -> 系統和安全 -> 系統 -> 進階系統設定 -> 進階 -> 環境變量 -> 建立，方法同JDK。
- 6 Visual Studio Code
Microsoft的一款針對編寫現代 Web 和雲應用的跨平台源代碼編輯器，做為我們的統一開發工具
你可以直接從官方網站下載下傳安裝
安裝完VSCode之後，請安裝Prettier, eslint, React Native Tools等插件
在用于React Native開發前，需要先在系統資料庫中進行一些修改：
- 打開運作指令（按下Windows+R鍵/cmd）
- 輸入
regedit.exe
- 在系統資料庫編輯器中找到
HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools
- 右鍵點選
Android SDK Tools
建立 > 字元串值
- 名稱設為
Path
- 輕按兩下
Path
C:\Program Files\Android\sdk
測試安裝：
cd到所需工作目錄下，按如下指令：
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
首次運作需要等待數分鐘并從網上下載下傳gradle依賴。（這個過程螢幕上可能出現很多小數點，表示下載下傳進度。這個時間可能耗時很久，也可能會不停報錯連結逾時、連接配接中斷等等——取決于你的網絡狀況和牆的不特定阻斷。總之要順利下載下傳，請使用穩定有效的科學上網工具。）
運作完畢後可以在模拟器或真機上看到應用自動啟動了。
如果apk安裝運作出現報錯，
請檢查上文中安裝SDK的環節裡所有依賴是否都已裝全，platform-tools是否已經設到了PATH環境變量中，運作adb devices能否看到裝置
。
-
至此，應該能看到app紅螢幕報錯，這是正常的，我們還需要配置ip端口，讓app正确通路pc端的packager服務。
-
一般運作完成的cmd視窗應該如圖：
-
現在開始處理紅窗問題（真機），首先确認你的手機和筆記本在同一網内，筆記本電腦可以通過熱點與之相連，如：
- 你需要打開搖一搖菜單(搖一下裝置，或者按下裝置的 Menu 鍵，或者在模拟器上按下 F2 或 Page Up，Genymotion 按下 ⌘+M)，可以打開調試菜單，點選Dev Settings，選Debug server host for device，輸入你的
正在運作packager的那台電腦的區域網路IP加:8081
-
附上最後的運作結果：
如果仍然為紅窗，且報錯：error: bundling failed: "Unable to resolve module `AccessibilityInfo` from `/Users/apple/WebstormProjects/carracing2/node_modules/react-native/Libraries/react-native/react-native-implementation.js`: Module does not exist in the module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: `watchman watch-del-all`.\n 2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n 3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`."
這個問題可能是新版本的bug,降級一下RN的版本
請用VSCode編譯你的項目，删減和修改代碼 package.json和app.js
h{
"name": "MyPr",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.2.0",
"react-native": "0.53.3"
},
"devDependencies": {
}
應該就可以解決紅屏問題了。（小白入門）Windows環境下搭建React Native Android開發環境
其他安裝項
- Git
使用Git做為代碼管理軟體，Git是目前世界上最先進的分布式版本控制系統（沒有之一）
你可以直接去Git for Windows官網下載下傳。 在安裝過程中注意勾選"Run Git from Windows Command Prompt"，這樣才會把git指令添加到PATH環境變量中
- Visual Studio Emulator for Android
Visual Studio Emulator for Android)是利用了Hyper-V技術進行硬體加速的免費android模拟器。也是Android Studio自帶的原裝模拟器之外的一個很好的選擇。而且你并不需要安裝Visual Studio。
- 參考：https://blog.csdn.net/wuqilianga/article/details/62045828
- http://bbs.reactnative.cn/topic/10/%E5%9C%A8windows%E4%B8%8B%E6%90%AD%E5%BB%BAreact-native-android%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/2
- https://reactnative.cn/docs/0.51/getting-started.html#content