RN

安裝RN

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

遇到問題一般是 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. 手機安裝 expo app扒袖，啟動項目之后冻晤，手機掃碼自動會打開expo app架诞，進行模擬項目
   

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`，第二項將 python 安裝到系統(tǒng)環(huán)境變量
   
       5. 驗證：`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. 驗證： 'java -version'
   

4. 下載安裝Android Studio

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

5. 全局安裝 react-native-cli

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

6. 初始化項目

       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，會自動打開三個窗口（node 服務(wù)订咸，模擬器曼尊，rn代碼），首次打開很慢算谈，需要下載依賴
   

7. 報錯

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

   2. 運行還報錯可以移除此路徑C:\Users\wangyuchen\.gradle\wrapper\dists\下的gradle-2.14.1-all料滥，,重新run-android

8. 運行到模擬器

9. 運行到真機（文檔就行）

   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. 初始化項目 react-native init myapp

ios（模擬器践宴，真機）

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

2. 初次yarn ios時候報錯阻肩，是cocoapods問題带欢，按照命令行提示就行，cd /目錄烤惊， pod install即可乔煞，初次較慢

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

4. ios真機：

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

   2. 除此之外柒室，還得設(shè)置team渡贾，http://www.reibang.com/p/f31116a76ea9

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

android（模擬器，真機）

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/， 注意事項跟官網(wǎng)一致

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

5. android 模擬器，會自動啟動模擬器

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

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

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

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

      解決： 項目中 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