Logo

菜单

发布于 2026-01-06 1 阅读
0

从零开始开发 React Native 应用

从零开始开发 React Native 应用

1. 前言

React Native 是由 Facebook 开发的开源框架，它允许开发者使用 JavaScript 和 React 构建真正的原生移动应用程序。其主要优势在于能够使用同一套代码库构建适用于 iOS 和 Android 平台的应用程序。本文将详细介绍如何从零开始开发一个 React Native 应用。

2. React Native 实现原则和技术细节

React Native 是一个基于 React 的框架，它允许开发者使用 JavaScript 编写原生应用。React Native 的核心理念是“一次学习，随处编写”，也就是说，只需学习一次，即可在任何地方编写代码。下面我们将深入探讨 React Native 的实现原理和技术细节。

2.1 React Native 渲染原理

React Native 的渲染原理基于 React 的虚拟 DOM 概念，但与在浏览器中运行的 React 有所不同。在 React Native 中，虚拟 DOM 不会被转换为 HTML，而是映射到原生 UI 组件。以下是 React Native 渲染过程的简要概述：

  1. JavaScript 线程：应用程序的 JavaScript 代码在此线程上运行。这包括 React 组件生命周期方法、状态管理和业务逻辑。

  2. 虚拟 DOM 树：开发者编写的 JSX 会被转换成虚拟 DOM 树。当组件状态改变时，React 会创建一个新的虚拟 DOM 树。

  3. Diff 算法：React 使用 Diff 算法来比较新的和旧的虚拟 DOM 树，并计算所需的最小更新次数。

  4. 桥接：React Native 使用名为“桥接”的系统来实现 JavaScript 线程和原生线程之间的通信。更新（称为操作指令集）在序列化后通过桥接发送到原生端。

  5. 原生线程：接收到操作指令集后，原生线程会根据这些指令更新原生UI组件。此过程在应用程序的主UI线程上执行，从而保证了UI的流畅性。

  6. 原生 UI 组件：React Native 封装了一系列与原生平台 UI 组件相对应的 React 组件，例如iOS 和Android 上的View组件。UIViewViewGroup

2.2. JavaScript 到原生桥接

React Native 的核心是 JavaScript 和原生平台之间的桥梁（Bridge）。这座桥梁允许 JavaScript 代码调用原生模块，而原生模块也可以回调 JavaScript 代码。

当 JavaScript 代码执行时，它会通过这个桥接器向原生端发送 JSON 格式的消息。原生端解析该消息，并根据消息内容执行相应的原生操作。原生操作完成后，可以通过同一个桥接器将结果发送回 JavaScript 端。

2.3. 虚拟 DOM（虚拟 DOM）

React Native 利用了 React 的虚拟 DOM 概念。开发者编写的 JavaScript 代码实际上是在构建一个虚拟 DOM 树。当状态发生变化时，React Native 会计算虚拟 DOM 树的变化，并将这些变化发送到原生端以更新实际的 UI。

2.4 原生组件

React Native 提供了一系列封装的原生组件，例如View`<Component>`、Text`<Component> Image`、`<Component>` 等，它们分别对应于 iOS 和 Android 上的原生 UI 组件。当这些组件被渲染时，它们会被转换为相应平台的原生视图。

2.5. 螺纹模型

React Native 应用程序通常有三个主要线程：

  • JavaScript 线程：运行 JavaScript 代码。
  • 主 UI 线程：原生平台的 UI 线程，用于渲染 UI 和处理用户交互。
  • 后台线程：用于执行长时间运行的任务，例如网络请求和图像加载。

2.6. 热更新和热重载

热更新或热重载是一种允许开发者实时更新和替换应用程序中模块的技术，而无需重启整个应用程序。在 React Native 中，此功能通过替换 JavaScript 模块来实现，而无需重新编译原生代码。以下是热更新的实现细节：

2.6.1. JavaScript 包

React Native 应用在运行时会加载一个包含所有 JavaScript 代码的 bundle 文件。这个 bundle 文件由打包工具（例如 Metro Bundler）创建，该工具会将所有 JavaScript 文件和资源打包到一个单独的文件中。

2.6.2 模块化系统

React Native 使用模块系统，其中每个 JavaScript 文件都被视为一个模块。这些模块在 bundle 文件中通过唯一的模块 ID 进行标识。

2.6.3. 热更新流程

  1. 监听文件更改：当开发者启用热更新功能时，打包服务器（例如 Metro）会监听项目文件中的更改。

  2. 模块替换：当文件被修改并保存时，打包服务器会重新打包该文件，并将更新后的模块发送到正在运行的应用程序。

  3. 桥接通信：React Native 中的桥接系统接收更新后的模块并将其传递给 JavaScript 线程。

  4. 模块热替换：JavaScript 线程使用新的模块代码替换旧的模块实例。这通常涉及更新模块缓存并重新执行模块的导出代码。

  5. 状态保持：为了维护应用程序状态，热更新会尽量避免重新加载整个应用程序。它尝试仅替换已更改的部分，同时保持应用程序的当前状态。

  6. UI 刷新：替换模块后，React Native 会触发重新渲染过程，以确保 UI 反映最新的代码更改。

2.6.4. 快速刷新

快速刷新是 React Native 中热更新的改进版本，它结合了热重载和实时重载的优点。快速刷新的实现细节包括：

  1. 错误恢复：如果在热更新过程中发生错误，快速刷新会尝试恢复到上次正常状态，而不是导致应用程序崩溃。

  2. 状态保留：快速刷新会尽可能地保留组件的状态，包括 React 的本地状态和 Hooks 状态。

  3. 智能重载：如果快速刷新检测到无法通过热更新安全地应用更改，它将回退到全局重载，同时仍尝试保留应用程序状态。

React Native 支持热重载和快速刷新。热重载允许开发者实时查看代码更改的效果，而无需重启整个应用程序。快速刷新是 React Native 0.61 版本中引入的一项新功能，它改进了热重载，并提供了更可靠的更新体验。热更新是 React Native 开发中的一项强大功能，能够极大地提高开发效率。

2.6.5. 模块化和插件

React Native 允许开发者创建模块化代码，并通过 npm 安装第三方插件。这些插件可以是纯 JavaScript 代码，也可以包含原生代码。如果包含原生代码，则插件需要同时提供 iOS 和 Android 的实现。

3. 最新技术

3.1. React Native 重构（Fabric）

  • 新的 UI 层：将直接在 UI 线程上运行，减少与 JavaScript 线程的通信，从而提高性能。
  • 新的桥接系统：新的桥接系统将采用异步方式，允许批量传输更新，从而减少通信开销。
  • JSI（JavaScript 接口）：JSI 是一个新的轻量级 API 层，它将取代现有的桥接系统，允许 JavaScript 直接调用 C++ 代码，而不是通过桥接器。

3.2. 涡轮模块

TurboModules 是 React Native 的另一项新特性，它允许按需加载原生模块，而不是在应用程序启动时一次性全部加载。这将缩短应用程序的启动时间并提高整体性能。

3.3. 代码生成

CodeGen 是一款自动化工具，用于为原生模块生成桥接代码。它简化了创建原生模块的过程，并确保了类型安全。

3.4. 博览会

它是一个用于构建和部署 React Native 应用程序的平台，提供预构建的模块、工具和服务，从而简化开发过程。

3.5. 爱马仕

由 Facebook 开发的 JavaScript 引擎，针对 React Native 进行了优化，可提供更快的启动速度和更流畅的性能。

3.6. 复活2

一个动画库，提供创建复杂、高性能动画所需的高级功能。

3.7. 鳍状肢

Facebook 开发的一款调试工具，允许开发者实时检查和调试其 React Native 应用程序。

3.8 悬念

一种新的数据获取机制，允许组件在等待数据时显示加载状态。

3.9. 驻波比

一个提供开箱即用的缓存、重新验证和乐观更新的数据获取库。

3.10. Next.js

这是一个用于构建服务器端渲染 React 应用程序的框架，现在支持 React Native，允许开发人员创建混合移动应用程序。

4. 开发 React Native 应用

4.1 准备工作

开始之前，请确保您的开发环境已安装 Node.js、npm（或 yarn）和 React Native 命令行工具（react-native-cli）。

npm install -g react-native-cli
Enter fullscreen mode Exit fullscreen mode

iOS 开发需要安装 Xcode；Android 开发需要安装 Android Studio 和相应的 SDK。

4.2 项目初始化

使用 React Native CLI 创建一个新的 React Native 项目：

react-native init MyAwesomeApp
Enter fullscreen mode Exit fullscreen mode

这将创建一个名为“MyAwesomeApp”的新目录，并设置所有必要的依赖项和项目文件。

4.3 目录结构

进入项目目录后，您将看到以下结构：

MyAwesomeApp/
├── android/
├── ios/
├── node_modules/
├── index.js
├── App.js
└── package.json
Enter fullscreen mode Exit fullscreen mode
  • android/目录ios/包含各自平台的本地代码。
  • node_modules/项目依赖项就在这里。
  • index.js是应用程序的入口文件。
  • App.js是一个 React 组件，代表应用程序的主界面。
  • package.json包含项目的依赖项和配置信息。

4.4 编写 React 组件

打开App.jsReact Native 并开始编写你的第一个 React 组件。React Native 提供了一系列核心组件，例如View`<Component> `、 Text`<Component>` Button、`<Component>` 等，可用于构建界面。

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Welcome to React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

export default App;
Enter fullscreen mode Exit fullscreen mode

4.5 运行应用程序

请确保您的设备或模拟器已启动并运行。然后，在项目目录中运行以下命令来启动应用程序：

iOS 系统：

react-native run-ios
Enter fullscreen mode Exit fullscreen mode

适用于安卓系统：

react-native run-android
Enter fullscreen mode Exit fullscreen mode

这些命令将启动 React Native 打包器，编译应用程序，并将其安装到设备或模拟器上。

4.6 调试和开发

React Native 提供了热重载功能，让您在保存文件后立即看到更新。此外，您还可以摇晃设备或使用命令⌘D（iOS）或⌘M（Android）打开开发者菜单，从中访问调试工具、性能监控和其他功能。

4.7 添加导航

大多数应用都需要导航功能。React Navigation 是 React Native 中最流行的导航库。首先，安装它：

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
Enter fullscreen mode Exit fullscreen mode

对于堆栈导航，您还需要安装堆栈导航器：

npm install @react-navigation/stack
Enter fullscreen mode Exit fullscreen mode

然后，您可以创建导航堆栈：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
Enter fullscreen mode Exit fullscreen mode

5. 使用 Codia AI Code 从零开始开发 React Native 应用

要将 Codia AI 集成到您的 Figma 到 React Native 开发流程中，请按照以下说明操作：
打开链接：Codia AI Figma 到代码：HTML、CSS、React、Vue、iOS、Android、Flutter、ReactNative、Tailwind、Web、App

打开链接

  • 安装 Codia AI 插件：从 Figma 插件商店搜索并安装 Codia AI Figma to React Native 插件。
  • 准备 Figma 设计：使用命名清晰的图层和组件来组织 Figma 设计，以确保获得最佳的代码生成结果。
  • 使用 Codia AI 进行转换：在 Figma 中选择您的设计或组件，然后使用 Codia AI 立即进行转换。

安装插件

生成 React Native 代码

React Native 代码

文章来源：https://dev.to/happyer/developing-a-react-native-app-from-0-to-1-1f8g
直觉：我曾四次有直觉，一次没有，以...
自制密码生成器：分步指南🤖 由 ...