React Native环境搭建

环境搭建

Node和JDK

1. Node版本 18
2. JDK版本

React Native版本	JDK版本
0.73	jdk17
0.73	jdk11
0.67	jdk8

3. yarn安装
   npm install -g yarn，Yarn是 Facebook 提供的替代 npm的工具 ## Android开发环境

4. 下载安装Android Studio

5. 安装Android SDK
SDK Platforms: Android API 33
SDK Tools: Android SDK Build-Tools 33.0.0、**Android SDK Command-line Tools 12.0**

6. 设置环境变量
   默认情况下Android SDK安装在C:\Users\<username>\AppData\Local\Android\Sdk中，可以自行修改。
   添加环境变量：设置ANDROID_HOME为C:\Users\<username>\AppData\Local\Android\Sdk
   在Path环境变量中添加：%ANDROID_HOME%\platform-tools和**%ANDROID_HOME%\cmdline-tools\12.0\bin** ## 准备Android设备

7. 使用Android真机

8. 使用Android模拟器
   使用Android Studio创建虚拟设备

9. 检查设备是否存在
   使用adb devices检查

## 创建模板项目

1. 新建项目
   npx react-native init TemplateProject

2. 编译运行

   cd TemplateProject
   yarn android

   ## 遇到的问题

3. 环境检查
   npx react-native doctor命令检查当前项目中的环境是否完备。

image.png

2. 识别不到Android SDK
   安装了SDK并且配置了环境变量，但是无法识别。
   需要安装Android SDK Command-line Tools 12.0，并配置环境变量。
3. Android SDK打包失败
   https://stackoverflow.com/questions/68387270/android-studio-error-installed-build-tools-revision-31-0-0-is-corrupted
   1. 修改%ANDROID_HOME%/build-tools/33.0.0目录中的d8.bat，修改为dx.bat
   2. 修改%ANDROID_HOME%/build-tools/33.0.0/lib目录中的d8.jar，修改为dx.jar # 组件库 经过调研，可以选取React Native Elements组件库(链接)，该组件库在github有24k stars，属于很流行的组件库。 ## 安装 这里选取React Native CLI方式安装。
4. 安装组件库
   1. yarn add @rneui/themed @rneui/base
5. 安装依赖
   1. yarn add react-native-safe-area-context
   2. yarn add react-native-vector-icons
6. 设置react-native-vector-icons
   1. 推荐使用Gradle设置，在android/app/build.gradle文件中添加语句apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle") # React Navigation 安装依赖

      yarn add @react-navigation/native
      // 如果是纯react native项目安装该依赖
      yarn add react-native-screens react-native-safe-area-context

      在android/app/src/main/java/<your package name>包下的MainActivity类中添加如下代码：

      class MainActivity: ReactActivity() {
        // ...
        override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(null)
        }
        // ...
      }

      同时在这个文件最开头导入：import android.os.Bundle;
      在App组件最外侧使用NavigationContainer标签包裹 ## Stack 安装
      yarn add @react-navigation/stack
      安装依赖
      yarn add react-native-gesture-handler
      使用
      在App.js或者index.js文件最开头引用：import 'react-native-gesture-handler';