RN

安裝RN

• 包含 win 環(huán)境下 android 模擬器 / 真機(jī) 和 mac 下 android / ios 的模擬器 / 真機(jī)

遇到問題一般是 JDK 版本或者 JAVA_HOME 環(huán)境變量的問題，或者下載速度（惡心）

Expo 環(huán)境

1. 概念：不直接安裝第三方原生組件，只需要js代碼，不建議國內(nèi)使用

2. 步驟

       1. 安裝：yarn global add expo-cli
   
       2. 初始化：expo init my_app
   
       3. cd my_app  &&  yarn start
   
       4. 手機(jī)安裝 expo app，啟動(dòng)項(xiàng)目之后，手機(jī)掃碼自動(dòng)會(huì)打開expo app，進(jìn)行模擬項(xiàng)目
   

win環(huán)境

參考地址：https://juejin.im/post/6844904134651412494#heading-2

1. Node 版本12以上

2. Python 2

       1. 下載地址：www.python.org/downloads/
   
       2. 參考地址：https://www.cnblogs.com/coco56/p/11525913.html
   
       3. 必須是 Python 2.x
   
       4. 傻瓜安裝，注意勾選 `Add Python to path`，第二項(xiàng)將 python 安裝到系統(tǒng)環(huán)境變量
   
       5. 驗(yàn)證：`python --version`
   

3. 安裝JDK

       1. 下載地址： 
   
       2. 參考地址：https://blog.csdn.net/weixin_44084189/article/details/98966787
   
       3. jdk必須1.8
   
       4. 自己配置環(huán)境變量，'JAVA_HOME' 'CLASSPATH'
   
       5. 驗(yàn)證： 'java -version'
   

4. 下載安裝Android Studio

       1. 下載地址：https://developer.android.google.cn/
   
       2. 電腦 user 名必須中文
   
       3. 新版 Android Studio 自帶JDK
   
       4. PowerShell 報(bào) yarn 不能安裝，參考：`https://blog.csdn.net/qq_45062261/article/details/100132489`
   
       5. 安裝參考：https://reactnative.cn/docs/getting-started.html （仔細(xì)按照文檔）
   

5. 全局安裝 react-native-cli

       1. 使用 yarn 全局安裝如果報(bào)錯(cuò) `“yarn”項(xiàng)識(shí)別為 cmdlet、函數(shù)、腳本文件或可運(yùn)行程序的名稱`
   
           解決：powershell 輸入`yarn global bin` -》 復(fù)制bin地址 -》 配置到環(huán)境變量 -》 重啟 powershell 即可
           參考：https://blog.csdn.net/ThisEqualThis/article/details/102959464
   
       2. react-native -h 檢車是否成功
   

6. 初始化項(xiàng)目

       1. 執(zhí)行 react-native init FirstApp
   
       2. 變更 npm 為淘寶鏡像：先到 C:\Program Files\nodejs\node_modules\npm -》 編輯 npmrc 文件 -》 新加 registry=https://registry.npm.taobao.org 即可
   
       3. 有yarn 默認(rèn)先執(zhí)行 yarn 下載鏡像
   
       4. 執(zhí)行 react-native run-android，會(huì)自動(dòng)打開三個(gè)窗口（node 服務(wù)，模擬器，rn代碼），首次打開很慢，需要下載依賴
   

7. 報(bào)錯(cuò)

   1. 初次運(yùn)行會(huì)很慢（國外鏡像），官方文檔解決是替換成阿里云的 maven鏡像

   2. 運(yùn)行還報(bào)錯(cuò)可以移除此路徑C:\Users\wangyuchen\.gradle\wrapper\dists\下的gradle-2.14.1-all，,重新run-android

8. 運(yùn)行到模擬器

9. 運(yùn)行到真機(jī)（文檔就行）

   1. npx react-native run-android, 去掉npx

Mac 環(huán)境（主要查看官方文檔）

參考：https://blog.csdn.net/Appleyk/article/details/105180965

注意版本

1. node（12.x），npm, yarn, react-native, brew, watchaman, pod(cocoapods), JDK(8), xcode(10以上)，android studio

基礎(chǔ)

1. node 版本 12 以上

2. 安裝 homebrew

3. 安裝watchaman，cocoapods，使用 brew install watchaman，brew install cocoapods

4. yarn global add react-native-cli

5. 初始化項(xiàng)目 react-native init myapp

ios（模擬器，真機(jī)）

1. 安裝 xcode，app store中直接安裝(較大)，檢查Command Line Tools版本

2. 初次yarn ios時(shí)候報(bào)錯(cuò)，是cocoapods問題，按照命令行提示就行，cd /目錄， pod install即可，初次較慢

3. ios模擬器：打開 xcode，運(yùn)行代碼就可以在模擬器中實(shí)現(xiàn)

4. ios真機(jī)：

   1. 參考：https://blog.csdn.net/qq_32294071/article/details/106948957

   2. 除此之外，還得設(shè)置team，http://www.itdecent.cn/p/f31116a76ea9

   3. 最后Bundle Identifier可能得改多次

android（模擬器，真機(jī)）

1. JDK 配置（必須是 8），java -version檢查版本是否 1.8

2. 配置 JAVA_HOME
   1. 終端輸入 export JAVA_HOME="/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home"

    2. 檢查 JAVA_HOME環(huán)境變量是否正確 `echo $JAVA_HOME`
   

3. 下載安裝 Android Studio，https://developer.android.google.cn/， 注意事項(xiàng)跟官網(wǎng)一致

4. yarn android, 配置對(duì)了 JAVA_HOME 環(huán)境變量，初次打開較慢，順利打開

5. android 模擬器，會(huì)自動(dòng)啟動(dòng)模擬器

6. android 真機(jī)：（根據(jù)文檔來）

   1. 記得執(zhí)行的是react-native run-android（不要 npx）

   2. 在react native 的0.62.2 下，使用 react-native run-android 有時(shí)候會(huì)出現(xiàn)如下兩種情況：

      Could not initialize class org.codehaus.groovy.runtime.InvokerHelper
java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.vmplugin.v7.Java7

      解決： 項(xiàng)目中 android/gradle/wrapper/gradle-wrapper.properties
      將 distributionUrl=https://services.gradle.org/distributions/gradle-6.0.1-all.zip

       改為：distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip