React Native开发环境搭建详细步骤

时间：2024-10-07 14:34:12

简介

React Native是一个使用React和应用平台的原生功能来构建 Android 和 iOS 应用的开源框架。通过React Native，可以使用JavaScript来访问移动平台的API，以及使用React组件来描述UI的外观和行为：一系列可重用、可嵌套的代码。

安装依赖​

必须安装的依赖有：Node、JDK 和 Android Studio。

1. Node的版本需大于等于12，安装完Node后建议设置npm镜像（淘宝源）以加速后面的过程

关于Node的安装方式很简单，在Node官网下载与电脑适配的文件，一路回车，next到最后，finish即可。

关于淘宝镜像的设置，在命令行cmd执行以下代码进行设置以及检查设置是否成功。

    

  1. 

    

    镜像设置npm config set registry https:///

    

    2. 

  2. 

    

    镜像检查npm config get registry
    

    3.

2. 安装Java SE Development Kit（JDK）11

在命令行中输入javac -version可以查看当前安装的 JDK 版本。如果版本不符合要求，则可以去AdoptOpenJDK或Oracle JDK上下载(后者下载需注册登录)。

低于 0.67 版本的 React Native 需要 JDK 1.8 版本（官方也称 8 版本）。

3. 安装Android Studio

首先下载和安装 Android Studio，官网介绍说安装界面中选择"Custom"选项，确保选中了以下几项：

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

然而安装时未出现前两项，不影响使用，点击"Next"即可完成安装（部分图片已省略，Next即可），完成后默认会启动Android Studio。

 

 

 

 

以上步骤安装完成后，运行Android Studio安装Android SDK（目前编译 React Native 应用需要的是Android 10（Q）版本的 SDK）。

3-1. Android Studio中Android SDK的安装步骤（部分图片已省略，Next即可）

​

这个过程可能有点漫长，需要耐心等待下载完成，Android Studio默认会安装最新版本的 Android SDK，需要在 Android Studio 的 SDK Manager 中选择安装所需版本的 SDK（设置为Android 10（Q）版本）。

3-2. Android SDK的版本设置：Android 10（Q）版本

步骤如下：SDK Manager中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 10（Q）选项，确保勾选了下面这些组件

  • Android SDK Platform 29
  • Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

然后点击"SDK Tools"选项卡，点击"NDK (Side by side)"，最后点击"Apply"来下载安装这些组件。

4. 配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

新建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向 Android SDK所在的目录（具体的路径可能和下图不一致，请自行确认）：

 SDK 默认是安装在下面的目录：

C:\Users\你的用户名\AppData\Local\Android\Sdk

5. 添加环境变量 Path

选择Path变量，然后点击编辑，点击新建把这些工具目录路径添加进去：platform-tools、emulator、tools、tools/bin

    

  1. 

    

    %ANDROID_HOME%\platform-tools
    

    2. 

  2. 

    

    %ANDROID_HOME%\emulator
    

    3. 

  3. 

    

    %ANDROID_HOME%\tools
    

    4. 

  4. 

    

    %ANDROID_HOME%\tools\bin
    

    5.

6. 创建新项目

使用cmd输入npx react-native init 项目名创建新项目，以下代码创建一个名为MyRnProject的新项目

npx react-native init MyRnProject

注意事项：

一：请不要在目录、文件名中使用中文、空格等特殊符号。请不要单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。请不要使用与核心模块同名的项目名（如 react, react-native 等）。

二：请不要在某些权限敏感的目录例如 System32 目录中 init 项目！会有各种权限限制导致不能运行！

三：请不要使用一些移植的终端环境，例如git bash或mingw等等，这些在windows下可能导致找不到环境变量。请使用系统自带的命令行（CMD或powershell）运行。

 7. 编译并运行 React Native

在项目目录下运行npx react-native run-android得到App安装文件，可以把这个apk文件安装在真机上或者模拟器。

以上完成！

相关文章