React Native安裝

一、 安裝Git

二、 安裝Python

目前，Python有兩個版本，一個是2.x版，一個是3.x版，兩個版本是不兼容，現在Python正在朝着3.x版本進化，在進化過程中，大量的針對2.x版本的代碼要修改後才能運行，所以，目前有許多第三方庫還暫時無法在3.x上使用。
注意：安裝Python2.x版本

配置環境變量

D:\Soft\Python27

三、 安裝nodejs

安裝完node後建議設置npm鏡像以加速後面的過程（或使用科學上網工具）。
注意：不要使用cnpm，cnpm安裝的模塊路徑比較奇怪，packager不能正常識別！

安裝命令

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

四、 Yarn、React Native的命令行工具（react-native-cli）

Yarn是Facebook提供的替代npm的工具，可以加速node模塊的下載。React Native的命令行工具用於執行創建、初始化、更新項目、運行打包服務（packager）等任務。

4.1 安裝命令

npm install -g yarn react-native-cli

4.2 設置鏡像源

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

示例

五、 Android Studio安裝與SDK配置

SDK在線更新鏡像服務器

• 騰訊bugly鏡像
• 配置教程

SDK Manager

• SDK Platforms窗口：
  選擇Show Package Details，然後在Android 6.0(Marshmallow)中勾選Android SDK Platform 23
• SDK Tools窗口：
  選擇Show Package Details，然後在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1（必須是這個版本）。然後還要勾選最底部的Android Support Repository.

配置環境變量

ANDROID_HOME=D:\Android\SDK
%ANDROID_HOME%\tools
%ANDROID_HOME%\platform-tools

六、 JDK配置

注意：安裝 JDK1.8以上版本

配置環境變量

JAVA_HOME=D:\jdk\jdk8
%JAVA_HOME%\bin
%JAVA_HOME%\jre\bin

七、 項目實戰

創建項目並運行
新建文件夾（路徑不含中文），進入該目錄，執行如下命令：

react-native init MyProject
react-native run-android

成功示例
如圖所示（需連接手機設備）：

八 、測試

8.1 瀏覽器

訪問http://localhost:8081/index.bundle?platform=android，可以看到打包後的腳本（很長的js代碼）。
第一次訪問通常需要較長時間，並且在packager的命令行可以看到形如[====]的進度條。
注意：老版本（低於0.49）的地址爲http://localhost:8081/index.android.bundle?platform=android

8.2 物理機

連接手機，重新運行程序

成功示例

---

問題記錄

babel-preset-react-native

• 報錯信息：

Error: Command failed: yarn add jest babel-jest babel-preset-react-native react-test-renderer@16.3.1 --dev --exact
    at checkExecSyncError (child_process.js:601:13)
    at execSync (child_process.js:641:13)
    at generateProject (E:/RN/MyProject/node_modules/react-native/local-cli/init/init.js:93:7)
    at Object.init (E:/RN/MyProject/node_modules/react-native/local-cli/init/init.js:50:5)
    at run (C:\Users\Murphy\AppData\Roaming\npm\node_modules\react-native-cli\index.js:302:7)
    at createProject (C:\Users\Murphy\AppData\Roaming\npm\node_modules\react-native-cli\index.js:249:3)
    at init (C:\Users\Murphy\AppData\Roaming\npm\node_modules\react-native-cli\index.js:200:5)
    at Object.<anonymous> (C:\Users\Murphy\AppData\Roaming\npm\node_modules\react-native-cli\index.js:153:7)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)

• 解決方法：
  參考 https://www.npmjs.com/package/babel-preset-react-native

npm i babel-preset-react-native --save-dev

手機端：

• 報錯信息：
  Could not connect to development server
• 解決方法：
  a. 點擊菜單（搖晃手機）：Dev Setting > Debug server host
  b. 配置ip：192.168.1.100:8081（示例）
  c. 點擊菜單（搖晃手機）：Reload JS

---

相關網站

• React Native 中文網
• 安裝教程
• 視頻教程
• Git下載地址
• Python下載地址
• Nodejs下載地址
• JDK下載地址

轉載請標明出處：https://blog.csdn.net/songrongtao