React Native 的基础是React， 是在 web 端非常流行的开源 UI 框架。要想掌握 React Native，先了解 React 框架本身是非常有帮助的。

一、什么是React Native1.1 React Native带来的惊喜

ReactNative 是一个使用JavaScript 和 React 来编写跨终端移动应用（Android 或 IOS）的一种解决方案，这句话是什么意思呢？ 

  1. 即使你不懂如何使用 Java 或 Kotlin 开发 Android，或者不懂如何使用 Swift 或 Objective-c 来开发iPad 或 iPhone 应用也不要紧，因为 React Native 几乎不需要和它们打交道。
  2.  如果你想同时开发 Android 和 iOS 应用，但苦于资金或者其他杂七杂八的条件，找不齐 Android或者 iOS 的开发人员，那么也不要紧，只要你的开发人员懂前端，懂 JavaScript 和 React 就够了，也能开发移动应用。
  3. 这句话还意味着，如果你是老板，只要你招了一个会 React 的前端，那么你就拥有 网页、H5 页面、移动 App 的全栈开发能力。是不是很惊喜…

1.2 React Native简介

  现在绝大多数 App 都采用混合模型开发，固定的基础的组件使用 Java 或 Swift 等原生语言开发，而偏运营的组件和页面则采用 React Native 等H5形式开发。这样做的好处就是原生开发者致力于创造基础组件，H5 致力于运营体验。现在的 iOS 审核速度已经很快了，几乎一天就有结果，但是之前，可能要审核一周，半个月，甚至还会不通过，然后又要重新开始进入审核等待，这对于大部分需要频繁更新的 App 来说是不可接受的。

  在这种情况下，React Native 出现了，它的首打功能就是热更新技术。热更新技术可以稍微的绕过应用商店的审核而直接更新。这样就可以达到快速上线的功能目的。

对于 React Native，官方的介绍更能体现出它的诞生前因后果。

  1. React Native 让我们可以只使用 JavaScript 语言就能构建出手机APP。
  2. React Native 采用 React 作为底层框架，如果你会 React 那么久很容易上手 React Native。
  3. React Native 采用声明性组件中创建丰富的移动UI。使用 React Native，你不是在构建移动 Web 应用程序，也不是在构建 HTML5 应用程序，更不是在构建混合应用程序。你是在构建一个真正的移动应用程序，与使用 Objective-C 或 Java 构建的应用程序没啥区别的。
  4. React Native 使用与原生iOS 和 Android 应用相同的基本 UI 构建块。如果你熟悉原生 iOS 或 Android开发，那么只需要使用 JavaScript 和 React 将这些构建块放一起。

1.3React Native 特性

  React Native 有着以下的几个特性：

  1. React —–底层采用 Facebook 开发的 React 技术。React 是一个视觉框架，使用 JavaScript 来构建网页和移动网页。
  2. 原生 —–React Native 内置了大量的原生组件，这比 Web App 有着更强大的性能。
  3. 平台多样性 —- React Native 开发的 App 可以运行在 iOS平台 和 Android 平台。

1.4React Native 优点

  1. JavaScript

    完全采用 JavaScript 语言。而不是某些不伦不类的看似 JS 又不是 JS的语言。这意味着在语言层面我们根本不需要重新学习。

  2. 跨平台

    Write Once，Run anywhere变得可能，尤其是 Android 和 iOS 两端。

  3. 社区给力

    国人的项目差距就在这里，国内的很多项目，尤其是阿里系的，看起来就是某个人的绩效。一段时间后连维护都不了。React Native 有着强大的社区，有着众多的开发者提供了各种类型的组件。

 

1.5React Native 局限性

  当然了，React Native 也不是万能的，它也有着自己的缺点和局限性。

  React Native 的缺点有两个：

  1. 复杂的状态管理，页面切换。即使你会 React，也会觉得它的页面切换有点绕。
  2. 创建新的原生组件复杂。如果你要创建一个之前从未出现过的原生组件，难度直线上升。你不仅需要懂得 Android 开发，还需要懂得 iOS 开发。

二、React Native环境搭建

   React Native环境的搭建与安装整个过程相对繁琐，步骤较多。最最最最最主要的是！在下载安装过程中不可中断网络，一旦断了就得重新下载。并且该过程中要求学会FQ，具体如何FQ这种问题就不要问啦，自行研究。

React Native中文网：https://www.reactnative.cn/docs/environment-setup

   基于国内用户系统环境，下文将介绍React Native的Windows环境安装。使用MAC系统或Linux系统的同学可自行查询官方安装文档说明。

 

2.1 环境搭建1、安装依赖：

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

  在安装React Native时必须要求开发者系统中安装有Node、JDK 和 Android Studio。虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。

2、Node、JDK安装

Node >= 12； JDK=1.8

 JDK中文网：https://www.oracle.com/cn/java/technologies/downloads/#java8

 Node官网网址：https://nodejs.org/zh-cn/

注意 Node 的版本应大于等于 12，安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程（或使用FQ上网工具）。

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

  既然已经说到JDK了那么小提一点。相信很多同学目前系统上的JDK不是8版本，而是更高的版本。这样React Native更大可能将出现版本兼容问题。如果把原有JDK版本卸载了那又会影响到很多以前的项目。这时候什么办呢？好问题！！! 有了好问题当然不能放过 ChatGPT 啦。

3、Yarn

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

安装命令：npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

4、Android 开发环境

  请注意！！！国内用户必须必须必须有稳定的代理软件，否则在下载、安装、配置过程中会不断遭遇链接超时或断开，无法进行开发工作。某些代理软件可能只提供浏览器的代理功能，或只针对特定网站代理等等，请自行研究配置或更换其他软件。总之如果报错中出现有网址，那么 99% 就是无法正常连接网络。

首先下载和安装 Android Studio，国内用户可能无法打开官方链接，请自行使用搜索引擎搜索可用的下载链接。安装界面中选择”Custom”选项，确保选中了以下几项：

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

然后点击”Next”来安装选中的组件。

如果选择框是灰的，你也可以先跳过，稍后再来安装这些组件。

安装完成后，看到欢迎界面时，就可以进行下面的操作了。

4.1安装 Android SDK

  Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 12 (S)版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android 5 以上设备）。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

  你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击”Configure”，然后就能看到”SDK Manager”。

SDK Manager 还可以在 Android Studio 的”Preferences”菜单中找到。具体路径是Appearance & Behavior→System Settings→Android SDK。

在 SDK Manager 中选择”SDK Platforms”选项卡，然后在右下角勾选”Show Package Details”。展开Android 12 (S)选项，确保勾选了下面这些组件（重申你必须使用稳定的代理软件，否则可能都看不到这个界面）：

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

然后点击”SDK Tools”选项卡，同样勾中右下角的”Show Package Details”。展开”Android SDK Build-Tools”选项，确保选中了 React Native 所必须的31.0.0版本。你可以同时安装多个其他版本。

最后点击”Apply”来下载和安装这些组件。

4.2配置 ANDROID_SDK_ROOT 环境变量

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

  打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录（具体的路径可能和下图不一致，请自行确认）：

  

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

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

你可以在 Android Studio 的”Preferences”菜单中查看 SDK 的真实路径，具体是Appearance & Behavior→System Settings→Android SDK。你需要关闭现有的命令符提示窗口然后重新打开，这样新的环境变量才能生效。

把一些工具目录添加到环境变量 Path

  打开控制面板->系统和安全->系统->高级系统设置->高级->环境变量，选中Path变量，然后点击编辑。点击新建然后把这些工具目录路径添加进去：platform-tools、emulator、tools、tools/bin

%ANDROID_SDK_ROOT%\platform-tools%ANDROID_SDK_ROOT%\emulator%ANDROID_SDK_ROOT%\tools%ANDROID_SDK_ROOT%\tools\bin

2.2 尝试安装一个项目

如果你之前全局安装过旧的react-native-cli命令行工具，请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突：

npm uninstall -g react-native-cli @react-native-community/cli

使用 React Native 内建的命令行工具来创建一个名为”AwesomeProject”的新项目。这个命令行工具不需要安装，可以直接用 node 自带的npx命令来使用：

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

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

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

npx react-native init AwesomeProject

注意！！！ 初始化第一个项目这个过程非常非常的难熬，因为这个过程中不仅需要等待 React Native下载补全配置还需要它自己下载各种东西，并且这个过程你要保持你的网络是外网，也就是说整个安装过程你的网络必须都处于FQ代理状态，网络也要保证快速，不然会很卡，一旦中断了又得重新下载。不过第一次初始化项目完成之后就往后就不需要这么难受了。第一次真的越想越气。

如果你的项目创建成功之后，那么。。。就打开你的Android Studio创建一个新的项目：

随意选择一个新的UI模板. Next 进行下一步，注意不能使用中文路径和项目名称！

进入项目页面。那么现在你就可以安装Android系统模拟器了，也就是咱们的手机 ，这就对于手机是IOS系统的同学需要安装模拟器啦。

选择你需要的模拟器版本，看你需要来安装吧。

接下来就需要选择你自身安装的Android SDK对应版本，等待下裁安装完成。

安装完成之后再页面中将会出现安装好的模拟器控制栏。点击运行就可以运行你的模拟器了。

这个时候运行刚才创建的项目。

确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行yarn android或者yarn react-native run-android

那么到这里不出意外的话就恭喜！你已经成功运行并修改了你的第一个 React Native 应用。

使用移动设备调式项目

  如果你不想那么麻烦的下载模拟器来调试你的项目，而刚好你又有一个Android的移动设备(最好是手机)。那么可以使用你的移动设备来调试你的项目。

只需用 usb 数据线连接到电脑，然后遵照在设备上运行这篇文档的说明操作即可。

1.使用你的USB数据选连接到你的电脑

2.开启你的开发者模式。

  在你的手机中找到：设置——关于本机——版本信息——版本号(连续快速点击很多次就会进入)

  每个手机的打开开发者模式不一样，可以自行解决。

3.允许USB调式模式和使用共享网络

4.检查是否正确连接

下面检查你的设备是否能正确连接到 ADB（Android Debug Bridge），使用adb devices命令：

$ adb devicesList of devices attachedemulator-5554 offline   # Google emulator14ed2fcc device         # Physical device

在右边那列看到device说明你的设备已经被正确连接了。注意，你每次只应当连接一个设备。

5.运行项目

  现在你可以运行下面的命令来在设备上安装并启动应用了。

npx react-native run-android

6.移动设备上允许安装程序

 

7.运行结果