基础环境

必须安装的依赖有：Node.js、Yarn 和 React Native 脚手架。这是运行 RN 的基础

Node.js

  • Node.js 的版本应大于等于 12，推荐安装 LTS 版本（去Node.js官网下载安装包）

  • 安装之后，（为了提高下载速度）我们将 npm 镜像源，设置为淘宝的

    #修改npm的镜像源
npm config set registry https://registry.npm.taobao.org

#验证是否更改成功（查看镜像源）：
npm config get registry

yarn

yarn 是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。使用之前先安装

npm install -g yarn

RN 脚手架

RN 脚手架会帮我们创建基础的目录结构，使用之前先安装

npm install -g react-native-cli

JDK

简介

JDK（Java Development Kit）是 Java 开发套件的简称。我们用 React Native 开发的 Android 应用，最终是运行在 Java 环境中的。所以，需要安装 JDK。

下载

JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本，注意 1.8 版本官方也直接称 8 版本）去官网下载（或者直接找老师要安装包）下载地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html请选择一个适合本地操作系统的安装包（操作系统+位数，例如：Windows x64）。下载时，提示需要登陆，我们可以先注册 Oracle 账户，登陆后再下载。

安装

下载完成后，双击安装包，开始安装（一直下一步就好，无需特殊配置）。安装过程中，会提示我们设置安装路径，这里我用默认的路径（安装到 C 盘）安装成功，点击 “关闭”

验证

安装完成后，重新打开命令行，输入 java -version，然后回车，验证安装是否成功（看到版本号，说明JDK 安装成功）。

如果看不到效果。需要将 JDK 的安装路径，绑定的环境变量中。然后，重新打开命令行验证。
在这里插入图片描述

Android Studio

Android Studio （简称 AS）是安卓开发的编辑器和运行环境。使用之前，先下载。

在安装 Android Studio 之前，请确保以下环境

  • 操作系统：Windows 7/8/10 (32-bit or 64-bit).
  • 内存：最小 4 GB，推荐 8 GB 或更高
  • 硬盘空间：最小2 GB，推荐 4 GB 或更高
  • JDK 版本：1.8（1.8 版本官方也直接称 8 版本）

如果你之前没有接触过 Android 的开发环境，那么请做好心理准备，这一过程相当繁琐。

结合自己的安装经历，把整个安装过程分成了 17 个步骤，下图是安装步骤的时间占比。
在这里插入图片描述
Step 1
下载 Android Studio
下载地址：https://developer.android.com/studio/index.html
如果无法打开官方链接，请翻墙下载。或直接找老师要安装包。
在这里插入图片描述

Step 2
下载完成后，双击安装包。Android Studio Setup 将显示在屏幕上，点击 Next 继续
在这里插入图片描述
Step 3
选择你需要安装的组件，需要安装 Android Studio 和 Android Virtual Device（安卓虚拟设备）。需要2.7GB 的空间。这里使用默认设置，点击 Next 继续。
在这里插入图片描述
Step 4
接下来会出现 Android Studio 的安装位置，这里我们使用默认位置，点击 Next 继续
在这里插入图片描述
Step 5
选择开始菜单文件夹，这里不做更改，点击 Install 继续
在这里插入图片描述
Step 6
接下来，我们会看到安装的进度条（可能会有点慢）。安装完成后，点击 Next 继续
在这里插入图片描述
在这里插入图片描述
Step 7
安装完成界面，点击 Finish，并启动 Android Studio（Start Android Studio）
在这里插入图片描述
Step 8
此时会出现 Android Studio 的欢迎页面
在这里插入图片描述

Step 9
欢迎页面之后，你会看到 Android 的启动导航页面。点击 Next 继续
在这里插入图片描述
Step 10
然后选择安装类型，对于初次安装的同学，此处建议使用默认的 Standard，标准安装（Standard）会为我们安装最常用的设置和选项。点击 Next 继续
在这里插入图片描述
Step 11
选择主题。这里有黑白两种，根据个人喜好选择即可。点击 Next 继续
在这里插入图片描述

Step 12
接下来，我们可以看到软件的位置。例如：SDK 和 JDK 的位置。另外，还可以看到需要下载的各个组件的大小。

例如：

  • Android Emulator 是 247 MB
  • Android SDK Tools 是 149 MB
  • Google APIs Intel x86 Atom System Image 是 1.15 GB）

总共需要下载 1.69 GB（Total Download Size），点击 Finish 会下载所有的 SDK 组件
在这里插入图片描述
在这里插入图片描述
Step 13
然后进入下载界面，这一下载过程，可能需要巨长巨长巨长的时间。主要有两个原因

  • 首先，这里下载的内容很大（大约 1.69 GB）
  • 另外，这一下载过程需要翻墙（需要 Google 的下载地址）

该下载过程要保证翻墙软件稳定，否则，可能会失败（下载中断）。

如果下载中断，需要多次重启 Android Studio，重复这一下载过程。直到安装完成
在这里插入图片描述
Step 14
安装完成后，我们就会见到 Android Studio 的欢迎界面。点击 Create New Project 创建新项目。
这里创建项目的目的有两个：

  • . 确保项目的运行环境
    • 可以在项目（编辑器菜单）中，安装模拟器软件
    • 可以在项目（编辑器菜单）中，安装 Android SDK
  • 启动模拟器，查看 RN 的运行效果
    在这里插入图片描述
    Step 15
    接下来，会弹出选择项目模板的界面，我们可以根据自己的需要，选择一个项目模板。这里用默认选中的模板。点击 Next 继续。
    在这里插入图片描述

Step 16
接下来，是配置项目界面。我们可以设置项目名称，项目存储位置以及项目编程语言（Java orKotlin）。这里我把项目名称重命名为 rndemo。点击 Finish 继续
注意：项目名称不要用中文，也不要包含特殊字符
在这里插入图片描述
Step 17
进入 Android Studio 界面，初次创建项目，可能需要等待几分钟
在这里插入图片描述

Android SDK

Android SDK 是针对安卓开发的套件。

为什么

虽然 Android Studio 默认会安装最新版本的 Android SDK。但是，目前编译 React Native 应用需要的是Android10(Q)版本的 SDK。所以，这里还需要再次安装一下 React Native 需要的 SDK。

怎么做

打开 Android Studio，在菜单 Tools 下找到 “SDK Manager”
在这里插入图片描述
在 SDK Manager 中选择"SDK Platforms"选项卡，然后，在右下角勾选"Show Package Details"。展开Android10(Q)选项，确保勾选了下面这些组件（重申：你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：

  • Android SDK Platform29
  • Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）
    在这里插入图片描述

然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的29.0.2版本。
在这里插入图片描述
总共有两个内容，组件大小约：113.0 MB，安装后占用空间约：451.9 MB
在这里插入图片描述

点击 OK 执行下载（这个下载时间也比较长，同时确保翻墙工具稳定可用）
在这里插入图片描述

如果下载过程中断，请重复选中以上两个组件，再次下载

例如，我本地下载中断，报错：SSL peer shut down incorrectly（网络中断报错）
只需要重复选中所需组件，再次下载即可。

下载完成后，点击 Finish
在这里插入图片描述

绑定环境变量

为什么
RN 运行时，需要执行 Android SDK 下的命令，将 Android SDK 相关路径配置到环境变量中，从而保证RN 能够正常地编译运行。

怎么做
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录：

鼠标放到此电脑上，右键查看属性，然后点击高级系统设置，然后点击高级下的环境变量
在这里插入图片描述

然后在系统变量下，选择新建，最后将你本地的 SDK 路径设置为 ANDROID_HOME 变量。

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

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

你可以在 Android Studio 的Tools → SDK Manager菜单中查看 SDK 的真实路径，具体是Appearance & Behavior→System Settings→Android SDK。
在这里插入图片描述
添加完ANDROID_HOME后。还可以把一些常用工具目录添加到环境变量 Path 中。

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

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

例如：adb。未添加以下环境变量之前，命令行中无法运行 adb 命令。其执行路径在：

%ANDROID_HOME%\platform-tools\adb.exe，配置环境变量后，就可以在命令行执行 adb命令了。
在这里插入图片描述

配置完成后，记得点击确定

模拟器

模拟器是在电脑上模拟出来的手机界面，我们可以在模拟器中，查看 App 的执行效果。

相当于 Web 开发中的浏览器。在使用之前需要先安装。

安装
打开 Android Studio。如果菜单中显示没有设备（No Devices），可以通过 AVD Manager 添加设备（模拟器）

如果菜单中已经安装了模拟器，你可以跳过本小节。直接去创建项目
在这里插入图片描述

在弹出窗口中，点击 Create Virtual Device，添加虚拟设备
在这里插入图片描述

在弹出窗口中，我们可以选择多个模拟器，这里我们安装默认的，直接点击 Next 继续
在这里插入图片描述
在下面的窗口中，我们点选默认的 Download
在这里插入图片描述
在弹出窗口，默认选中 Decline （拒绝）
在这里插入图片描述
此时，我们选择 Accept（接收），然后 Next 高亮了，我们点击 Next 继续
在这里插入图片描述

然后进入下载页面，这里下载的组件，大约有 1.1GB，所以，下载时间可能有点长（而且需要翻墙）
在这里插入图片描述
下载完成，点击 Finish 继续
在这里插入图片描述
此时，对应的 Next 按钮高亮显示了，我们点击 Next 继续
在这里插入图片描述
接下来，我们会看到模拟器的信息，点击 Finish 继续
在这里插入图片描述
此时，我们安装的模拟器，就会出现在列表中。点击右上角的 X，关掉窗口即可。

当然，你可以继续安装其他的模拟器（右下角 + Create Virtual Device…），我们这里安装一款就 OK 了

在这里插入图片描述
然后，我们在 Android Studio 的菜单中，就能看到刚才安装的模拟器了。
在这里插入图片描述

启动
在 Android Studio 中有三种方式启动模拟器

  • 点击菜单Run -> Run ‘app’
  • 点击绿色的小三角
  • 快捷键 Shift+F10
    在这里插入图片描述
    启动之后的效果。模拟器（手机框）可以任意拖动。安卓工程师一般会在 Android Studio 中编写代码，然后在模拟器中看效果。我们在学习 React Native 编程过程中，只需要借助 AndroidStudio 的安卓运行环境和模拟器。我们不需要在 Android Studio 中写代码。
    在这里插入图片描述

验证
在命令行中，输入 adb devices , 查看当前开启的模拟器地址。如果看不到模拟器，说明模拟器未启动
在这里插入图片描述

注意：未绑定环境变量之前，在命令行执行 adb 会报：”adb“ 不是内部或外部命令所以， 执行 adb devices
之前，请确保绑定了环境变量。

创建项目

通过创建 React Native 项目和运行项目，可以验证我们之前安装的环境是否正常可用。

初始化项目
打开命令行，初始化项目（项目的存储位置可以自己设定，例如：我本地是 D:\rn）

#初始化项目（确保已经安装了react-native-cli）
react-nativeinitrndemo

初始化完成后，我们可以通过 vscode ，打开项目目录，熟悉一下里面的目录结构
在这里插入图片描述
ndex.js 是 RN 项目的入口文件, 此文件会加载 App.js

ios 目录，是 RN 编译 iOS 应用的目录

android 目录，是 RN 编译安卓应用的目录

运行项目
首先在命令行中，进入项目，然后运行

#进入项目
cd rndemo
#运行项目
yarn android #运行到android
#或者
yarn react-nativerun-android

第一次运行时，需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的翻墙工具，否则将频繁遭遇链接超时和断开，导致无法运行。
在这里插入图片描述

建议在run-android成功后，再尝试使用 Android Studio 启动。

请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。

启动异常处理：

在这里插入图片描述
如果见到上图报错：Unable to load script. Make sure …
解决方案：

  1. 创建 assets 目录

    mkdirandroid/app/src/main/assets

    注意：dos 中的分隔符是 , Mac 和 Linux 下的分隔符是 /

  2. 执行打包命令
    将下面的命令，添加到 package.json 的 scripts 中

    "android-bundle":"react-nativebundle--platformandroid--devfalse--entry-fileindex.js--bundle-outputandroid/app/src/main/assets/index.android.bundle--assets-destandroid/app/src/main/res&&react-nativerun-android"

  3. 然后在命令行中运行

    yarn android-bundle

我们可以看到 RN 的编译窗口
在这里插入图片描述
项目编译成功后，我们就可以看到模拟器了，此时，模拟器中显示的内容，就是初始化生成的 RN 项目
在这里插入图片描述
除了在模拟器上看项目运行的效果，我们还可以通过手机查看 RN 项目的效果，即真机调试

如果要真机调试，必须开启 Android 手机的开发者模式，需要用 usb 数据线连接到电脑。

真机调试细节参考：在设备上运行这篇文档。

# react native
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

解析openGauss账本数据库

avatar 华为开发者空间
cover

GaussDB高智能--库内AI引擎：模型管理&数据集管理

avatar 华为开发者空间
cover

GaussDB高智能--库内AI引擎：机器学习算法的训练和推理

avatar 华为开发者空间