首先不得不先吐槽一下自己，一個坑總是踩很多次，且樂此不疲。
咋辦? 寫博客記錄記錄唄。
零、記錄的點
-
Java環境的下載與配置
-
Android環境的下載與配置
-
Node環境的下載與配置
-
創建第一個react-native應用
最終能夠達到的目的：在手機上能夠運行第一個React-Native應用~
以備后用，已將安裝包上傳到了網盤 密碼：bqbc
一、Java環境的下載與配置
記錄下Java里面的三個術語理解
JDK是什么？
答曰：JDK乃【Java開發工具包】 (Java Development Kit ) 的縮寫,
是一種用於構建在 Java 平台上發布的應用程序、applet 和組件的開發環境
JRE是什么？
答曰：JRE乃【Java運行環境】(Java Runtime Environment)的縮寫,
其包含JVM標准實現及Java核心類庫
JVM是什么？
答曰：JVM是【Java虛擬機】(Java Virtual Machine)的縮寫
下載安裝配置JDK
- 到官網 或者android-studio下載JDK
- 安裝JDK，我安裝到的
D:\Software\JavaJdk - 必須得配置環境變量滴
①java_home:D:\Software\JavaJdk
②classpath(.;開頭):.;%java_home%\lib\dt.jar;%java_home%\lib\tools.jar
③追加path變量的值:;%java_home%\bin
二、Android環境的下載與配置
下載Android SDK
到android-studio下載SDK。
運行installer_r24.4.1-windows.exe安裝、或zip解壓出來的SDK Manager.exe
然后我安裝了以下這些包(我的react-native版本是0.40.0)
SDKManager使用說明
被鏡像坑了，所以不推薦鏡像，直接修改hosts文件就成--->去找最新的hosts
鏡像地址--->去找最新的鏡像地址
鏡像使用說明
使用鏡像安裝不了23.0.1的同學趁早換hosts的方式或者掛vpn。
科學還是得備個xxx吶~~~
SDK包下好了，接下來就配置系統環境變量吧
①ANDROID_HOME:D:\Software\JavaAndroidSdk
②追加path變量的值: %ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;%ANDROID_HOME%;
我的Path圖
測試Java環境，Android環境
失敗自行回退檢查~~
三、安裝node.js
node官網歷史版本修改下載鏈接的值就能下載歷史版本了
如：我使用的是版本是V6.2.0
然后就是node的一些設置了
npm config set prefix "D:\Program Files\nodejs\node_global" //設置全局包目錄,添加環境變量
npm config set cache "D:\Program Files\nodejs\node_cache" //設置緩存目錄
npm config set registry https://registry.npm.taobao.org //設置淘寶鏡像
之前有安裝過node，卸載舊版重新安裝到之前的目錄就==升級了
npm升級命令npm update
四、創建第一個在手機上運行的react-native應用
-
啟動CMD定位到開發目錄：例
F:\ReactDemo -
初始化一個項目：
react-native init yimoapp -
cd yimoapp -
運行packager：
react-native start如果你碰到了ERROR Watcher took too long to load的報錯，請嘗試將這個文件中的MAX_WAIT_TIME值改得更大一些 (文件在node_modules/react-native/目錄下)。
成功運行這時候可以用瀏覽器訪問 http://localhost:8081/index.android.bundle?platform=android 查看服務端是否已成功啟動 -
真機運行,使用usb連接手機，開啟USB調試權限
-
查看連接的設備：
adb devices
-
react-native run-android構建工程並自動安裝到手機如果沒開VPN就不要慌，先做點准備工作。手動下載gradle-2.4-all.zip到本地
修改F:\ReactDemo\yimoapp\android\gradle\wrapper\gradle-wrapper.properties文件的distributionUrl配置為[本地的gradle-2.4-all.zip路徑]以使其可離線下載
-
包安裝得差不多的時候會提示你安裝應用
可能會有一個這樣的錯誤，奇怪的是第一次安裝有,這一次安裝就沒有遇到了。
將android/build.gradle文件中的 classpath 'com.android.tools.build:gradle:1.3.1' 改為 classpath 'com.android.tools.build:gradle:1.2.3' 。猜測是插件包不兼容導致。 -
解決白屏問題
找到並開啟應用的懸浮窗權限,以mui8.1為例，設置->授權管理->應用權限管理->yimoapp->勾選顯示浮窗權限
然后再次打開yimoapp。我去。這次來個大紅色的錯誤了
咋辦。搖一搖說不定有奇跡
在回退刷新前。我去改了改
index.android.js，好了回到頁面搖一搖然后刷新
總結與收獲
總結記錄是很有必要的。
有很多問題是在Java和Android環境沒有弄好的情況下會出現的。
參考文章：
- http://www.tuicool.com/articles/26byiuZ 這里面的錯我也都遇到過~~
- http://www.cnblogs.com/suxun/p/5220564.html 有配置模擬器的
一天就這樣結束，一天就這樣開始。
---------2018-09-14更新-----------------
添加阿里雲 maven 源
在 C:\Users\Administrator\.gradle 目錄新建文件 init.gradle，寫入下面的配置即可
allprojects {
repositories {
mavenLocal()
maven { name "Alibaba" ; url "https://maven.aliyun.com/repository/public" }
maven { name "Bstek" ; url "http://nexus.bsdn.org/content/groups/public/" }
}
buildscript {
repositories {
maven { name "Alibaba" ; url 'https://maven.aliyun.com/repository/public' }
maven { name "Bstek" ; url 'http://nexus.bsdn.org/content/groups/public/' }
maven { name "M2" ; url 'https://plugins.gradle.org/m2/' }
}
}
}
--------------2019-02-28更新---------------
使用 adb 連接夜神模擬器(6.0)
adb connect 127.0.0.1:62001
若提示 adb server version (36) doesn't match this client (40)，將 androidsdk下的 adb.exe 覆蓋模擬器安裝目錄下的 nox_adb.exe
安裝插件后需要運行的命令
- 安裝插件后需要解析依賴：
react-native link - 清理 Android 緩存：
cd android&&gradlew cleanBuildCache&&cd .. - 安裝插件后需要重新執行:
react-native run-android
注意
- 盡量使用 yarn 安裝依賴，npm 5.0+ 在安裝一個包后可能會刪除另外的包，故每次安裝后都需要重新
npm i - 安裝插件后需要重新執行