ReactNative在windows系統上的配置

ReactNative在windows下的環境配置

1.需要下載安裝的工具

⑴、JDK

⑵、Android SDK

⑶、node.js 下載地址：https://nodejs.org/en/download/

2.環境變量的配置

⑴、新建環境變量JAVA_HOME變量值為：C:\Program Files\Java\jdk1.8.0_60

⑵、新建環境變量ANDROID_HOME變量值為：E:\SDK

⑶、新建環境變量CLASSPATH變量值為：

.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

⑷、編輯Path添加：

Ⅰ、%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

Ⅱ、%ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

⑸、檢查node.js的環境在Path中是否自動配置，正常情況是有C:\Program Files (x86)\nodejs\

3.創建ReactNative項目使用到的命令行語句

⑴、全局配置react-native:npm install -g react-native-cli

⑵、使用淘寶鏡像，提高速度：

Ⅰ、npm config set registry https://registry.npm.taobao.org --global

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

⑶、項目創建：npm react-native init MyApp

⑷、項目運行：react-native run-android

⑸、手機和node服務連接：adb reverse tcp:8081 tcp:8081

4.ReactNative項目Android打包

⑴、在環境變量里配置gradle,再在android目錄下運行 gradle wrapper

⑵、簽名文件生成

⑶、創建assets文件夾

⑷、在項目的根目錄（index.js）下執行

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

⑸、在android目錄下執行：gradlew assembleRelease

5.調試

在谷歌瀏覽器中打開http://localhost:8081/debugger-ui/

6.遇到的一些問題

⑴、‘react-native’不是內部命令 npm install -g react-native-cli

⑵、org.gradle.wrapper.GradleWrapperMain解決：在環境變量里配置gradle，再在android目錄下運行 gradle wrapper

7.開發工具

Android Studio（Android原生）和WebStorm（js代碼）

8.RN中文網

https://www.reactnative.cn/