什么是 React Native？跨平台移动应用编程完全指南

本节将为您提供最全面的 React Native 概述，从其定义、起源、核心工作原理到其明显的优缺点。您将了解 React Native 为何成为移动应用开发的首选，以及它与其他流行技术有何不同。

概述：从 ReactJS 到 React Native

React Native 是由 Facebook（现为 Meta）开发的开源框架，允许开发者基于单一代码库构建 iOS 和 Android 移动应用。React Native 使用的主要语言是 JavaScript，以及 JSX（JavaScript XML）语法——一种允许在 JavaScript 中编写类似 HTML 代码的扩展语法。

React Native 的根源可以追溯到它的“兄弟”ReactJS，这是一个用于构建 Web 应用用户界面 (UI) 的 JavaScript 库。Facebook 意识到 ReactJS 基于组件的开发模式的成功和高效，并试图将同样的理念应用于移动应用开发。React Native 应运而生，将 React 的强大功能带入了移动世界。这意味着，如果您已经熟悉 ReactJS，那么过渡到 React Native 编程将会更加轻松。

核心运营原则：“一次学习，随处书写”

React Native 的著名口号是“一次学习，随处编写”。这恰恰体现了它的工作原理。React Native 不像其他一些框架那样，将 JavaScript 代码编译成针对每个平台的原生代码，而是基于“桥接器”工作。

应用运行时，JavaScript 代码会在单独的线程（JS 线程）中运行。当需要渲染 UI 或访问设备功能（例如相机、GPS）时，JavaScript 代码会通过桥接器向原生线程（原生线程）发送异步消息。原生线程会解释这些消息，并使用操作系统的原生 UI 组件（例如 iOS 上的 UIView 和 Android 上的 View）将它们显示在屏幕上。

这种机制有两大好处：

1. 流畅的用户体验：由于界面使用真实的原生组件呈现，用户会感觉“真实”且熟悉，就像使用用机器原生语言编写的应用程序一样。

2. 高性能：逻辑繁重的任务在 JS 线程上处理，不会影响原生 UI 线程，使应用程序响应更快。

React Native 与其他技术的比较

为了更好地理解 React Native 的地位，将其与其他技术进行比较非常重要。

• React Native 与 ReactJS：这是最常见的问题。ReactJS 是一个用于构建 Web 用户界面的库，它使用虚拟 HTML 标签，例如

  同时，React Native 用于构建移动应用程序的界面，使用已映射到原生 UI 的组件，例如，。两者都共享 JSX 语法、组件、props 和 state 的概念。因此，可以说 ReactJS 和 React Native 是同门兄弟，但用途不同。

• React Native 与 Flutter：Flutter 是 React Native 最直接的竞争对手，由 Google 开发。

  • 语言：React Native 使用 JavaScript/TypeScript，而 Flutter 使用 Dart。

  • 架构：React Native 使用 Bridge 与原生平台通信。Flutter 使用 Skia 图形引擎绘制其整个界面，而无需使用操作系统的原生 UI 组件。这使得 Flutter 拥有极高的图形性能，并在所有设备上拥有绝对一致的界面，但与原生应用相比，有时会产生“奇怪”的感觉。

• React Native 和原生编程（Swift/Kotlin）：

  • 性能：原生编程始终是最高效的，因为代码是直接针对操作系统编写和优化的。React Native 虽然非常高效，但它有一个称为 Bridge 的中间层，因此对于极其复杂或图形要求高的任务来说，速度可能会比较慢。

  • 时间和成本：这是 React Native 的突出优势。你不需要为 iOS 和 Android 分别建立和维护两个独立的团队，只需要一个 JavaScript 团队就可以同时为两个平台进行开发，从而节省大量时间和成本。

React Native 初学者从基础到高级的学习路径

你将获得一份详细的、循序渐进的 React Native 学习路线图。这条科学设计的 React Native 学习路线从基础的基础知识开始，逐步讲解如何自信地构建、管理状态、优化应用程序，并将它部署到市场。

第一阶段：掌握 JavaScript 和 ReactJS 基础

这是最重要的一步，但很多人经常忽略。React Native 并非一项独立的技术，它建立在 JavaScript 和 React 之上。如果你没有扎实的基础就尝试学习 React Native，那将会非常困难。

• JavaScript（ES6+）：您需要扎实掌握现代 JavaScript 概念，包括：

  • 变量和范围： let ， const ， var 。

  • 数据类型： Array 、 Object 。

  • 功能：箭头函数（ => ）。

  • 异步编程：Promises、async/await。

  • 解构、扩展/剩余运算符。

  • 模块：导入、导出。

• ReactJS：掌握 JavaScript 之后，你需要学习 React 的核心概念。以下是学习 React 最有效的路线图：

  • JSX：编写 UI 的语法。

  • 组件：函数组件和类组件（现在函数组件更流行）。

  • Props：如何将数据从父组件传递到子组件。

  • 状态：如何管理组件的内部状态。

  • 生命周期方法（在类组件中）和 React Hooks（在功能组件中）如 useState 、 useEffect 、 useContext 。

第二阶段：React Native 入门 - 环境和工具

一旦掌握了基础，就可以开始深入 React Native 的世界。

• 了解开发环境：了解两种主要方法之间的区别：

  • React Native CLI（命令行界面）：提供对项目的完全控制，允许您编写自定义原生代码。适用于复杂项目。

  • Expo：一套基于 React Native 构建的工具和服务，可简化开发流程。无需安装 Android Studio 或 Xcode。非常适合初学者以及不需要深度集成原生代码的项目。

• 环境设置：根据您的选择，按照详细说明手动设置环境并创建您的第一个项目。

第三阶段：构建界面和用户交互

在这个阶段，您将学习如何将您的想法转化为手机上的真实界面。

• 核心组件：熟悉最基本的组件，例如，， ，，。

• 样式：学习如何使用 StyleSheet API（类似于 CSS，但使用 JavaScript 语法）来设置组件样式。掌握 Flexbox 布局，构建灵活、响应式的布局，适用于多种屏幕尺寸。

• 列表：了解如何使用和有效地显示数据列表。

• 导航：这是每个应用的重要组成部分。学习如何使用最流行的 React Navigation 库来创建屏幕之间的导航流程，包括 Stack Navigator、Tab Navigator ( createMaterialTopTabNavigator ) 和 Drawer Navigator。

阶段 4：管理数据和应用程序状态

随着应用程序变得复杂，管理状态和数据变得具有挑战性。

• 状态管理：探索全球状态管理解决方案，例如：

  • React Context：React 的内置解决方案，适用于中小型应用程序。

  • Redux / Redux Toolkit：最流行、最强大的状态管理库，适用于大型应用程序。

  • 其他解决方案如 MobX、Zustand。

• 使用 API：了解如何使用 fetch API 或 axios 等库从服务器调用 API 来获取和发送数据。

• 本地存储：掌握如何使用 AsyncStorage（一种简单高效的键值存储解决方案）在用户设备上存储数据。

第五阶段：优化和部署应用程序

构建应用程序后，最后一步是确保它顺利运行并将其交到用户手中。

• 性能：学习 useMemo 、 useCallback 、 React.memo 等优化技术，以避免不必要的重新渲染，优化 FlatList 性能，并使用 Flipper 调试性能问题。

• 部署：了解将应用程序构建为 .apk（Android）和 .ipa（iOS）文件的过程以及将应用程序放到 Google Play Store 和 Apple App Store 上的步骤。

环境搭建及第一个 React Native 项目创建指南

摘要：本节提供详细的动手指南，帮助您搭建自己的开发环境并成功运行您的第一个“Hello World”项目。我们将清晰地分析两种流行的方法：Expo 和 React Native CLI，以帮助您做出最合适的选择，开启您的编码之旅。

选择环境：React Native CLI 与 Expo - 选择哪一个？

在开始之前，你需要做出一个重要的决定：应该使用 Expo 还是 React Native CLI。这是开发 React Native 应用的两条主要途径，各有优缺点。

• 博览会（推荐给初学者）：

  • 优势：

    • 快速设置：您只需安装 Node.js 和 Expo CLI。无需安装 Android Studio 或 Xcode（非常庞大）。

    • 易于开发：您可以通过 Expo Go 应用程序扫描二维码直接在真实手机上运行该应用程序。

    • 内置 API：Expo 提供了一组经过优化和测试的库（SDK），可以轻松访问摄像头、传感器、推送通知……

  • 缺点：

    • 限制：您无法使用 Expo SDK 中未包含的需要原生链接的 React Native 库。虽然 Expo 现在提供了 expo dev 客户端来提供一些帮助，但仍然存在一些限制。

    • 更大的应用程序大小：使用 Expo 构建的应用程序通常具有稍大一些的初始大小。

• React Native CLI（适用于专业和复杂的项目）：

  • 优势：

    • 最大的灵活性：您可以完全控制项目，可以集成任何本机库并在需要时编写自己的本机模块。

    • 优化应用程序大小：只打包所需的内容，使最终的应用程序更轻。

  • 缺点：

    • 设置复杂：需要安装和配置 Android Studio（适用于 Android）和 Xcode（适用于 iOS），这是一个耗时且容易出错的过程。

    • 依赖于虚拟机/真实设备：需要运行虚拟机（模拟器/仿真器）或通过电缆连接真实设备进行开发。

结论：如果你是 React Native 新手，或者正在开发一个不太复杂的项目，那么就从 Expo 开始吧。它将帮助你专注于学习 React Native 的逻辑，而不会被环境配置问题分散注意力。

Expo（Expo Go、Expo Dev Client）的详细说明

要求：

1. 安装 Node.js（LTS 版本）。

2. 在您的 Android 或 iOS 手机上安装 Expo Go 应用程序。

遵循的步骤：

1. 安装 Expo CLI：打开终端（在 macOS/Linux 上）或命令提示符/PowerShell（在 Windows 上）并运行以下命令：

   npm install -g expo-cli

2. 创建新项目：

   博览会初始化 MyFirstApp

   出现提示时，选择“空白模板”（对于空项目）或“标签页”（对于带有标签页导航栏的项目）。然后，导航到项目文件夹：

   cd MyFirstApp

3. 运行项目：

   npm 启动

   此命令将启动 Metro Bundler 并在终端中显示二维码。

4. 在手机上查看应用程序：在手机上打开 Expo Go 应用程序，选择“扫描二维码”，然后扫描终端上的二维码。您的应用程序将下载并在手机上运行。就是这么简单！

React Native CLI（Android Studio、Xcode）的详细说明

此过程较为复杂，需要针对每个操作系统进行配置。

一般要求：

1. 安装 Node.js（LTS 版本）。

2. 安装 Watchman（推荐用于 macOS）。

在 Android 上安装（在 Windows/macOS/Linux 上）：

1. 安装 Java 开发工具包 (JDK)。

2. 安装 Android Studio 。

3. 在 Android Studio 中，转到 SDK 管理器并安装所需的 Android SDK 平台。

4. 配置ANDROID_HOME环境变量。

5. 从 Android Studio 创建并启动 Android 虚拟机 (AVD)。

为 iOS 安装（仅限 macOS）：

1. 从 App Store 安装 Xcode。

2. 在 Xcode 中安装命令行工具。

3. 安装 CocoaPods。

创建并运行项目：

1. 创建新项目：

   npx react-native init MyFirstCliApp

2. 在Android上运行：

   确保你的 Android 虚拟机正在运行，或者物理设备已连接。然后运行以下命令：

   npx react-native run-android

3. 在 iOS 上运行（仅限 macOS）：

   确保你的 iOS 虚拟机正在运行。然后，运行以下命令：

   npx react-native run-ios

首次构建可能需要一些时间。一旦成功，您将看到默认的 React Native 应用在虚拟机中运行。

你必须知道的 React Native 核心概念

摘要：本节将深入探讨每个 React Native 应用的构建块。你将了解组件、属性和状态的本质，它们如何协同工作，如何有效地设置界面样式，以及如何在应用中处理用户事件和复杂的导航。

组件、道具和状态：每个应用程序的基础

与 ReactJS 类似，React Native 中的所有内容都是组件。组件是一个独立的、可复用的 UI 部分。你可以将每个屏幕、每个按钮、每个输入字段视为一个组件。

• 组件：是 JavaScript 函数（函数组件）或类（类组件），它们返回 React 元素来描述界面应该是什么样子。

• Props（属性）：一种将数据从父组件传递到子组件的方式。Props 是只读对象，这意味着子组件无法更改其接收的 props。在上面的示例中，title 就是一个 prop。

• 状态：是组件自行管理的数据，可以随时间变化。当状态发生变化时，组件将自动重新渲染以更新界面。在函数式组件中，我们使用 useState 钩子来管理状态。

样式：创建美观且灵活的界面

在 React Native 中，你不需要使用 CSS，而是使用 JavaScript 来设置样式。最常见的方法是使用 StyleSheet.create 来定义样式，并将其应用到组件的 style 属性上。

• 样式表：帮助优化性能并创建更清晰的代码。

• Flexbox：这是 React Native 中的主要布局引擎。如果你熟悉 Web 上的 Flexbox，那么你一定会觉得它很熟悉。它允许你灵活地排列元素，并轻松创建适应多种屏幕尺寸的复杂界面。

用户事件处理（文本输入、触摸、BackHandler）

移动应用需要与用户交互。React Native 提供了强大的事件系统。

• 触摸： TouchableOpacity 、 TouchableHighlight 、 Pressable 等组件允许您通过 onPress 、 onLongPress 等道具处理触摸事件、长按等。

• 文本输入：该组件允许用户输入文本。使用 onChangeText 属性来捕获文本更改事件并相应地更新状态。

• BackHandler：这是一个 Android 特有的 API，允许您监听并自定义用户按下物理“返回”按钮时的行为。您可以使用它在退出应用前显示确认对话框，或在复杂的流程中返回上一屏幕。

使用 React Navigation 进行应用内导航

大多数应用都有多个屏幕。管理屏幕之间的流程称为导航。最流行和推荐的库是 React Navigation 。

• NavigationContainer：是应该包装应用程序整个导航结构的根组件。它管理导航树并包含导航状态。

• 导航器：React Navigation 提供不同类型的导航器来创建不同的流程：

  • 堆叠导航器：屏幕堆叠在一起。当您转到新屏幕时，新屏幕会放置在最上面。当您返回时，新屏幕会被移除。这是最常见的类型。

  • Tab Navigator：在屏幕底部或顶部显示标签栏，允许在不同屏幕之间切换。createMaterialTopTabNavigator 就是一个例子，它在屏幕顶部创建一个标签栏，在 Android 应用程序中很常见。

  • 抽屉导航器：显示从屏幕边缘滑出的菜单。

结合这些导航器，您可以构建满足大多数现代应用程序要求的复杂导航流。

使用 API 和高级功能

探索如何扩展应用的功能。本部分将指导您如何使用 AsyncStorage 高效地在本地存储数据，如何使用 BLEManager 等库与设备硬件交互，如何构建聊天界面等复杂功能，以及如何集成 VNPAY 支付网关等外部服务。

使用 AsyncStorage 在本地存储数据

当你需要存储简单数据，并在用户关闭应用后也能持久化时（例如，保存登录令牌、用户设置、应用状态），AsyncStorage 是一个合适的工具。它是一个未加密的异步键值存储系统，适用于 iOS 和 Android。

它的工作方式类似于网络上的 localStorage，但是完全异步，这意味着读/写操作返回一个 Promise 。

• 环境：

  npm 安装 @react-native-async-storage/async-storage

• 使用示例：

  从 '@react-native-async-storage/async-storage' 导入 AsyncStorage ; // 保存数据 const storeData = async (value) => { try { await AsyncStorage.setItem( '@storage_Key' , value); } catch (e) { // 保存错误 } }; // 读取数据 const getData = async () => { try { const value = await AsyncStorage.getItem( '@storage_Key' ); if (value !== null ) { // 先前存储的值 } } catch (e) { // 读取值时出错 } };

硬件和系统 API 集成（BLEManager、摄像头、地理定位）

移动应用的真正强大之处在于其与硬件和操作系统服务交互的能力。React Native 通过丰富的库生态系统，让您轻松实现这一点。

• 低功耗蓝牙 (BLE)：要使用 BLE 设备（例如智能手表、医疗设备），可以使用 react-native-ble-manager (BLEManager) 之类的库。该库提供扫描、连接、读取和写入 BLE 设备数据的功能。

• 相机和照片库：react-native-vision-camera 或 react-native-image-picker 等库允许您访问设备的相机来拍照、录制视频或从用户库中选择照片/视频。

• 位置（地理位置）：react-native-geolocation-service 库提供对设备 GPS 位置的访问，对于地图绘制、交付或签到应用程序很有用。

使用 GiftedChat 构建聊天界面

从零开始构建聊天界面可能是一项艰巨的任务。幸运的是，社区创建了 GiftedChat，这是一个功能强大且易于使用的库，可帮助您在几分钟内创建功能齐全的聊天界面。

GiftedChat 提供以下组件：

• 聊天气泡

• 显示头像

• 自动调整输入字段的大小

• 发送图片、视频

• “加载更多消息”功能

• ...以及更多。

您只需以特定格式提供消息数据，GiftedChat 将处理其余部分。

支付网关集成（例如：VNPAY）

支付集成是电商或服务类应用的常见需求。在 React Native 中集成像 VNPAY 这样的支付网关，一般流程包括以下步骤：

1. 安装库：查找并安装 React Native 的 VNPAY 支持库（如果有）或使用 WebView 显示 VNPAY 支付页面。

2. 创建付款请求：从应用程序，您将订单信息（金额、订单代码等）发送到您的服务器。

3. 服务器生成支付URL：您的服务器将使用VNPAY的SDK生成唯一的支付URL并将其返回给应用程序。

4. 显示支付页面：React Native 应用在 WebView 中打开此 URL。用户将在 VNPAY 界面上输入支付信息。

5. 结果处理：用户完成支付后，VNPAY 会跳转到您配置的返回 URL。应用会在 WebView 中监听该 URL 的变化，以判断交易是否成功或失败，并相应地更新界面。

赢得雇主青睐：常见的 React Native 面试问题

准备好面试前所需的知识和自信。这套 React Native 面试题库清晰地分类，涵盖基础知识、核心理论、实际场景以及深入的性能优化问题，助您以最全面的方式做好准备。

基础知识与理论题组

这些问题是为了测试您是否牢固掌握了基本概念。

1. 什么是 React Native？它是如何工作的？

   • 建议答案：强调它是一个跨平台框架，使用 JavaScript 和 React。解释 Bridge 机制，以及 JS Thread 和 Native Thread 的区别。

2. 比较 React Native 与 Flutter 和原生编程。

   • 建议答案：提及语言（JS 与 Dart）、架构（Bridge 与 Skia）、性能以及开发时间/成本方面的优点/缺点。

3. ReactJS 和 React Native 有什么区别？

   • 建议答案：关注预期用途（网络与移动）和原始组件（ div / span 与 View / Text ）。

4. React Native 中的 Props 和 State 有何不同？

   • 建议答案：Props 用于将数据从父组件传递给子组件，这些数据是不可变的。State 是组件的内部数据，它可以更改，并且更改后会触发重新渲染。

5. Flexbox 在 React Native 中是如何工作的？列举一些重要的属性。

   • 建议答案：解释 Flexbox 是主要的布局机制。重要属性： flexDirection （默认为 column ）、 justifyContent 、 alignItems 、 flex 。

6. FlatList 和 ScrollView 有什么区别？什么时候使用 FlatList？

   • 建议答案：ScrollView 会一次性渲染所有子元素，适合短列表。FlatList 使用“延迟加载”机制（仅渲染屏幕上可见的项目），这有助于优化长列表的内存和性能。

情况处理和实践经验问题组

这些问题评估您的解决问题的能力和实际工作经验。

1. 你会为新项目选择 Expo 还是 React Native CLI？为什么？

   • 建议答案：根据项目需求进行分析。如果项目需要快速、简单且不需要太多原生干预，请选择 Expo。如果项目复杂、要求高性能且集成了许多原生库，请选择 CLI。

2. 如何管理大型 React Native 应用程序的状态？

   • 建议答案：请列举一些解决方案，例如 Redux (Redux Toolkit)、MobX 或 React Context。解释每个方案的优缺点，并说明为什么你会为大型项目选择某个方案。

3. 您在 React Native 中遇到了哪些性能问题以及如何解决这些问题？

   • 建议答案：给出具体的例子，例如长列表滞后（通过优化 FlatList 解决）、不必要的重新渲染（通过 useMemo 、 useCallback 、 React.memo 解决）或 Bridge 过载。

4. 如何处理iOS和Android不同版本的界面？

   • 建议答案：参考使用平台 API（ Platform.OS === 'ios' ），创建单独的文件（例如 MyComponent.ios.js 和 MyComponent.android.js ），或者使用为两个平台提供组件的 UI 库。

5. 描述调试 React Native 应用程序的过程。

   • 建议答案：提及 Chrome DevTools、React Native Debugger、Flipper 等工具，以及如何使用 console.log 来监控数据流。

关于性能优化和应用程序架构的问题

这些是针对高级职位的问题，测试深入的知识。

1. React Native 中的 Bridge 是什么？它的局限性是什么？新的架构（JSI - JavaScript 接口）如何改进它？

   • 建议答案：解释一下 Bridge 是异步的，并且依赖于 JSON 序列化，这可能会导致瓶颈。JSI 允许 JavaScript 直接同步调用原生函数，从而减少延迟并显著提高性能。

2. Hermes 是什么？我们为什么要使用它？

   • 建议答案：Hermes 是一个针对 React Native 优化的 JavaScript 引擎。它有助于缩短应用启动时间、减少内存占用并减小 APK 文件大小。

3. useMemo 和 useCallback 有什么用？什么时候会用到它们？

   • 建议答案： useMemo 用于“记忆”复杂计算的值。 useCallback 用于“记忆”函数。两者都有助于避免每次重新渲染时不必要的重新计算或重新创建函数，从而优化性能，尤其是在将它们传递给由 React.memo 包装的子组件时。

4. React Native 中可以进行代码拆分吗？

   • 建议答案：与 Web 不同，传统的代码拆分并不直接应用。但是，可以使用“内联依赖”之类的技术将模块加载延迟到实际需要时，从而缩短启动时间。

优质 React Native 课程和文档

为了帮助您成为专业的 React Native 开发人员，本部分提供了精选的权威资源列表、可供您学习和交流的知名社区，以及优质在线 React Native 课程的建议，包括免费和付费选项。

权威资源和信誉良好的社区

这些是您应该首先访问的地方，以获取最准确和最新的知识。

• React Native 官方文档：这是最原始、最可靠的文档来源。所有概念、API 和安装说明都非常详细，并且始终保持最新版本。养成阅读原始文档的习惯，这对于优秀的程序员来说是一项重要的技能。

• Expo 文档页面：如果您选择使用 Expo，那么这绝对是您的必备良伴。它提供了 Expo SDK、命令行工具以及 Expo 工作流程的详细文档。

• React Native GitHub：关注 GitHub 上的官方源代码存储库可帮助您掌握即将发生的变化、正在讨论的问题以及社区贡献。

• Viblo 社区：Viblo 是越南最大的 IT 知识分享社区之一，在这里你可以找到无数的文章、React Native 教程，以及经验丰富的程序员对 React Native 的深入分析。

• 国外技术博客：Dev.to、Medium、LogRocket等网站定期发布关于React Native的新技术、库和真实案例研究的高质量文章。

推荐的 React Native 在线课程

如果您喜欢以结构化的方式并通过视频教程学习，那么在线课程是一个不错的选择。

• 免费课程：

  • “The Net Ninja” YouTube 频道：提供一系列非常直观且易于理解的 React Native 教程，适合初学者。

  • “使用 Mosh 编码”YouTube 频道：Mosh Hamedani 拥有高质量的基础 React Native 教程视频。

  • F8 平台（Fullstack.edu.vn）：提供越南语免费编程课程，包括 ReactJS 和 React Native，并拥有结构化的路线图和强大的社区支持。

• 付费课程（高质量）：

  • Udemy 课程：该平台提供种类繁多的 React Native 课程，涵盖从入门到高级的各类内容，由 Stephen Grider、Maximilian Schwarzmüller 等知名讲师授课。这些课程通常内容全面，包含实际项目，并定期更新。您可以留意折扣，以合理的价格购买课程。

  • 像 Frontend Masters 这样的深度平台：提供由行业顶尖专家讲授的 React 和 React Native 高级方面的深度课程。如果你已经拥有扎实的基础并希望提升技能，那么这个平台非常适合你。