RN在各端下的环境搭建

RN

安装RN

• 包含 win 环境下 android 模拟器 / 真机 和 mac 下 android / ios 的模拟器 / 真机

遇到问题一般是 JDK 版本或者 JAVA_HOME 环境变量的问题，或者下载速度（恶心）

Expo 环境

1. 概念：不直接安装第三方原生组件，只需要js代码，不建议国内使用

2. 步骤

       1. 安装：yarn global add expo-cli
   
       2. 初始化：expo init my_app
   
       3. cd my_app  &&  yarn start
   
       4. 手机安装 expo app，启动项目之后，手机扫码自动会打开expo app，进行模拟项目
   

win环境

参考地址：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 安装到系统环境变量
   
       5. 验证：`python --version`
   

3. 安装JDK

       1. 下载地址： 
   
       2. 参考地址：https://blog.csdn.net/weixin_44084189/article/details/98966787
   
       3. jdk必须1.8
   
       4. 自己配置环境变量，'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、函数、脚本文件或可运行程序的名称`
   
           解决：powershell 输入`yarn global bin` -》 复制bin地址 -》 配置到环境变量 -》 重启 powershell 即可
           参考：https://blog.csdn.net/ThisEqualThis/article/details/102959464
   
       2. react-native -h 检车是否成功
   

6. 初始化项目

       1. 执行 react-native init FirstApp
   
       2. 变更 npm 为淘宝镜像：先到 C:\Program Files\nodejs\node_modules\npm -》 编辑 npmrc 文件 -》 新加 registry=https://registry.npm.taobao.org 即可
   
       3. 有yarn 默认先执行 yarn 下载镜像
   
       4. 执行 react-native run-android，会自动打开三个窗口（node 服务，模拟器，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 环境（主要查看官方文档）

参考：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

基础

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，运行代码就可以在模拟器中实现

4. ios真机：

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

   2. 除此之外，还得设置team，https://www.jianshu.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环境变量是否正确 `echo $JAVA_HOME`
   

3. 下载安装 Android Studio，https://developer.android.google.cn/， 注意事项跟官网一致

4. yarn android, 配置对了 JAVA_HOME 环境变量，初次打开较慢，顺利打开

5. android 模拟器，会自动启动模拟器

6. android 真机：（根据文档来）

   1. 记得执行的是react-native run-android（不要 npx）

   2. 在react native 的0.62.2 下，使用 react-native run-android 有时候会出现如下两种情况：

      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