react-native 环境详细搭建

react-native目录结构

```js
├── App.js  // React Native 源码，主要是存放入口组件 App 的源码
├── __tests__  //测试文件目录
├── android  // React Native 原生组件和其它需要原生代码的目录, Android 平台下所有的原生代码
├── app.json  // 配置文件
├── babel.config.js
├── index.js  // 入口文件
├── ios  // React Native 原生组件和其它需要原生代码的目录, iOS 平台下所有的原生代码
├── metro.config.js // FaceBook 的工程构件文件
├── node_modules
├── package.json
├── package-lock.json
└── yarn.lock
```

• app.json

  {
      "name": "", // 用于配置项目的名称
      "displayName": "" // 用于配制生成 iOS 和 Android 项目时的显示名称，也就是桌面上图标下面的名称。
  }
  

搭建环境

1. node的版本要大于等于14，注意记得切换镜像

   • 不要使用cnpm，cnpm安装路径奇怪
   • yarn使用不错

2. 下载java se development kit（jdk）

   • https://adoptium.net/zh-CN/temurin/releases/?version=11 或者 https://www.oracle.com/java/technologies/downloads/#java11（需要登录） 下载路径
   • 配置java环境
   • 系统变量 => JAVA_HOME 和 安装路径
   • 系统变量 => Path => C:\Program Files\Common Files\Oracle\Java\javapath;%JAVA_HOME%\bin
   • 系统变量 => CLASSPATH 和 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\tools.jar
   • （不确定）在安装路径下生成jre文件 bin\jlink.exe --module-path jmods --add-modules java.desktop --output jre （注意路径中不能有空格和汉字）

3. 下载Android Studio

   • 汉化插件 https://plugins.jetbrains.com/plugin/13710-chinese-simplified-language-pack---- => get => 下载完毕，解压完毕 => 在 Android Studio 设置中 installed => 导入解压的jar
   • 在 Android Studio 设置中 android sdk 检查下 sdk platforms 和 sdk tools 是否有 installed 却没有安装的

4. 配置 ANDROID_HOME 环境变量

   • 建议两个环境变量都添加次变量
   • ANDROID_HOME => C:\Users\你的用户名\AppData\Local\Android\Sdk （sdk默认安装在下面目录）
   • %ANDROID_HOME%\platform-tools %ANDROID_HOME%\emulator %ANDROID_HOME%\tools %ANDROID_HOME%\tools\bin （把一些工具目录添加到环境变量 Path）

5. 安装脚手架

   • npm install -g react-native-cli
   • npx react-native init AwesomeProject 创建项目

6. local.properties 问题 (经测试，这个文件不是导致首次项目运行错误的问题)

   • 生成的 rn 项目缺少 local.properties 会导致 sdk 获取地址一直不对

   • 所以在Android目录和根目录下建立同名同内容文件

     ## This file is automatically generated by Android Studio.
     # Do not modify this file -- YOUR CHANGES WILL BE ERASED!
     #
     # This file must *NOT* be checked into Version Control Systems,
     # as it contains information specific to your local configuration.
     #
     # Location of the SDK. This is only used by Gradle.
     # For customization when using a Version Control System, please read the
     # header note.
     #Thu Feb 18 09:56:40 CST 2016
     sdk.dir=/home/Users/你的用户名/AppData/Local/Android/Sdk
     

7. 运行需要注意的

   • 模拟器 android studio 默认生成的有一个13的模拟器
   • 工具栏有一个安卓图标的手机图标，点击打开模拟器配置
   • 运行 rn 项目需要先启动手机模拟器
   • 执行 run android
   • 运行期间需要下载一些东西可能比较慢

8. 模拟器问题

   • 会在运行过程中卡死
   • 在配置模拟器的地方，将热启动改为冷启动就好了