React Native (RN) 中文介绍与上手指南 – wiki基地

作者： /

React Native (RN) 中文介绍与上手指南：用 JavaScript 构建原生移动应用

引言：跨平台开发的挑战与机遇

在当今移动互联网时代，企业和开发者都需要为 iOS 和 Android 这两大主流平台提供应用。然而，为每个平台单独开发应用意味着需要两套不同的技术栈（Swift/Objective-C for iOS, Java/Kotlin for Android）、两组开发人员、两套代码库，这无疑增加了开发成本、延长了开发周期、提高了维护难度。

为了解决这一痛点，跨平台开发框架应运而生。它们旨在允许开发者使用一套技术栈和大部分共享代码，同时为不同平台构建应用。市面上有多种跨平台方案，如 Flutter、Ionic、Xamarin 等，而 React Native (RN) 则是其中最流行、最成熟的框架之一，由 Facebook（现 Meta）于 2015 年开源。

本文将详细介绍 React Native 是什么、它的核心优势和工作原理，并提供一个详细的上手指南，帮助你快速搭建环境并创建第一个 React Native 应用。

第一部分：认识 React Native

1. React Native 是什么？

React Native 是一个使用 JavaScript 和 React 来构建 原生移动应用 的框架。它的核心理念是 “Learn Once, Write Anywhere”（一次学习，随处编写），而不是 “Write Once, Run Anywhere”（一次编写，到处运行）。这意味着你学习的是 React 的开发模式和理念，然后可以使用这些知识来为 iOS 和 Android 平台构建各自的 原生 应用。

与其他一些跨平台框架（如 Ionic）依赖 WebView 来渲染 UI 不同，React Native 的独特之处在于它通过一个“桥接”（Bridge）机制，将 JavaScript 代码转换为调用原生平台（iOS 或 Android）的 UI 组件 API。这意味着你在屏幕上看到的不是 Web 页面，而是真正的 iOS UIView 或 Android View。因此，React Native 应用能够提供接近原生应用的性能和用户体验。

2. React Native 的核心优势

  • 原生性能与体验： RN 不使用 WebView，而是直接渲染原生 UI 组件。这使得应用在滚动、动画和整体响应速度上通常比基于 WebView 的框架更流畅，用户体验更接近完全的原生应用。
  • 跨平台开发效率： 使用同一套 JavaScript/React 代码库可以在 iOS 和 Android 平台运行，大大减少了重复工作。大部分业务逻辑和 UI 都可以共享。
  • 热重载 (Hot Reloading) 和快速刷新 (Fast Refresh)： RN 提供了出色的开发体验。修改代码后，无需完全重新编译和启动应用，即可立即在模拟器或设备上看到变化。这极大地提高了开发效率。
  • 基于 React，易于上手： 如果你已经熟悉 React 或 Web 开发，学习 React Native 会非常快。RN 沿用了 React 的组件化思想、JSX 语法、单向数据流等核心概念。
  • 庞大的社区支持： 得益于 React 本身的流行以及 Facebook 的推动，React Native 拥有一个活跃的社区，提供了丰富的第三方库、工具和解决方案。
  • 与原生代码的无缝集成： 当需要访问特定的平台 API 或实现高性能计算时，可以轻松地编写原生模块（Native Modules）并通过桥接在 JavaScript 中调用，或者将原生组件（Native Components）嵌入到 RN 界面中。
  • 代码共享与维护： 统一的代码库使得应用的维护和迭代更加高效，新功能的开发和 Bug 修复可以更快地同步到两个平台。

3. React Native 的一些考量

  • 并非完全“一次编写”： 虽然大部分代码可以共享，但有时仍需要处理平台差异，例如 UI 样式、API 调用或设备特性。复杂的原生功能可能需要编写原生模块。
  • 依赖原生环境配置： 为了构建和运行应用，你仍然需要安装和配置 iOS (Xcode) 和 Android (Android Studio) 的开发环境，这对于不熟悉移动开发的开发者来说可能是一个门槛。
  • 桥接的开销： JavaScript 和原生层之间的通信（桥接）存在一定的开销，尤其是在处理大量数据或频繁通信时，可能会影响性能。在性能敏感的场景下，可能需要优化或使用原生模块。
  • 社区和生态系统变化快： React Native 本身以及其生态系统（库、工具）更新迭代较快，有时可能需要适应 Breaking Changes。
  • 抽象层限制： 某些非常底层的操作系统特性或高度定制的 UI 可能难以在 RN 中直接实现，需要回退到原生开发。

总的来说，React Native 是构建大多数企业级和消费者应用的优秀选择，尤其适合那些希望利用现有 Web 开发资源、追求开发效率同时不牺牲过多原生体验的团队。

第二部分：React Native 工作原理浅析

要理解 React Native，了解它的基本工作原理很有帮助：

  1. JavaScript 线程： 你的大部分 React Native 代码运行在一个独立的 JavaScript Core 虚拟机中（在 iOS 上）或独立的线程中（在 Android 上）。它负责处理应用的业务逻辑、组件状态管理、用户事件处理等。
  2. 原生 UI 线程： 设备的原生 UI 线程负责渲染和管理真正的原生视图（如 UIView 在 iOS, View 在 Android）。所有 UI 相关的操作（布局计算、绘制、处理手势）都在这个线程上执行，以确保流畅的 UI 性能。
  3. 桥接 (Bridge)： 这是连接 JavaScript 线程和原生 UI 线程的关键。当 JavaScript 代码需要更新 UI（例如改变文本内容、显示或隐藏组件）或调用原生 API（例如访问相机、地理位置）时，它会通过桥接将消息发送给原生线程。原生线程接收到消息后，会执行相应的原生操作，例如更新原生视图的属性或调用原生模块的方法。反过来，当原生层发生事件（例如用户点击按钮、传感器数据变化）时，原生线程也可以通过桥接将消息发回给 JavaScript 线程，触发相应的 JavaScript 事件处理函数。
  4. 原生模块 (Native Modules)： 这些是用原生语言（Objective-C/Swift for iOS, Java/Kotlin for Android）编写的代码，用于访问平台特定的 API。RN 暴露了一些核心的原生模块（如 NetInfo, AsyncStorage, Geolocation），开发者也可以创建自定义的原生模块。
  5. 原生组件 (Native Components)： 这些是 RN 提供的用于渲染原生 UI 元素的组件，例如 <Text> 对应 iOS 的 UITextView 和 Android 的 TextView，<View> 对应 iOS 的 UIView 和 Android 的 View。RN 的渲染器负责根据 JSX 描述创建和配置这些原生组件。

简而言之，React Native 的核心在于利用桥接机制，让 JavaScript 代码能够“指挥”原生平台创建和管理真正的原生 UI 组件，并与原生功能交互。

第三部分：React Native 上手指南 – 搭建开发环境

上手 React Native 的第一步是搭建一个稳定可靠的开发环境。根据你的操作系统和需求，有几种不同的方式。最常见的两种是使用 Expo CLI 和 React Native CLI。

  • Expo CLI： Expo 是一个围绕 React Native 构建的工具链和平台，它封装了许多复杂的原生配置，使得开发者可以更快速地开始，无需安装和配置 Xcode 或 Android Studio 的大部分内容（除非你需要构建原生包）。它特别适合初学者和不涉及复杂原生功能的项目。但它的缺点是限制了你使用一些需要手动链接的原生库，并且不能直接编写自定义原生模块（除非“eject”到 React Native CLI 项目）。
  • React Native CLI： 这是 React Native 官方提供的命令行工具，它提供了对项目最完整的控制。你可以轻松地集成任何原生库，编写自定义原生模块。但它的缺点是需要手动安装和配置完整的 iOS 和 Android 原生开发环境（Xcode, Android Studio, JDK, CocoaPods 等），配置过程相对复杂。

本指南将介绍两种方法的环境搭建。

准备工作：安装 Node.js 和 Watchman

无论使用哪种方式，你都需要先安装 Node.js 和 Watchman。

  1. 安装 Node.js 和 npm/yarn：

    • React Native 需要 Node.js 环境来运行 JavaScript 代码和管理依赖。建议安装 LTS (长期支持) 版本。
    • 访问 Node.js 官网 (https://nodejs.org/) 下载并安装适合你操作系统的版本。
    • 安装 Node.js 会自带 npm (Node Package Manager)。你也可以选择安装 yarn (https://yarnpkg.com/)，它是另一个流行的包管理器，有时速度更快。
    • 安装完成后，打开终端或命令行，输入以下命令检查安装是否成功：
      bash
      node -v
      npm -v
      # 如果安装了 yarn
      yarn -v

  2. 安装 Watchman (推荐，尤其在 macOS)：

    • Watchman 是 Facebook 开发的文件监视服务，用于监听文件变化并触发热重载或快速刷新。在 macOS 上特别推荐安装。
    • macOS: 使用 Homebrew 安装：
      bash
      brew install watchman
    • Windows: Watchman 在 Windows 上不是必须的，但如果需要可以使用 scoop 或 chocolatey 安装：
      bash
      # 使用 Scoop
      scoop install watchman
      # 使用 Chocolatey
      choco install watchman

方法一：使用 Expo CLI 搭建环境 (推荐初学者)

Expo CLI 简化了环境搭建和项目创建。

  1. 全局安装 Expo CLI：

    • 打开终端或命令行，运行以下命令：
      bash
      npm install -g expo-cli
      # 或使用 yarn
      yarn global add expo-cli
    • 安装完成后，检查版本：
      bash
      expo --version

  2. 在手机上安装 Expo Go 应用：

    • 在你的 iOS 或 Android 设备上，从 App Store 或 Google Play 商店搜索并安装 Expo Go 应用。这个应用将用于在你的设备上预览和运行 Expo 项目，无需连接数据线（只要在同一局域网）。

环境搭建完成！ 使用 Expo CLI 搭建环境非常简单，只需要 Node.js, Watchman 和 Expo CLI 本身。接下来可以直接创建项目。

方法二：使用 React Native CLI 搭建环境 (需要完整原生环境)

使用 React Native CLI 需要你安装完整的 iOS 和 Android 开发工具。这部分配置相对复杂，请耐心操作。

跨平台通用要求：

  • Java Development Kit (JDK): Android 开发需要 JDK。建议安装 OpenJDK 版本 11。
    • macOS: 使用 Homebrew 安装：
      bash
      brew tap AdoptOpenJDK/openjdk
      brew install --cask adoptopenjdk11 # 或其他推荐的 LTS 版本
    • Windows: 可以从 Adoptium (Eclipse Temurin) 或 OpenJDK 官网下载安装包进行安装。安装后需要配置 JAVA_HOME 环境变量。

针对 iOS 开发 (仅限 macOS):

  • Xcode：
    • React Native CLI 构建 iOS 应用需要 Xcode。从 Mac App Store 安装最新版 Xcode。
    • 安装完成后，打开 Xcode，进入 Preferences > Locations，确保命令行工具 (Command Line Tools) 被选中。
    • 安装 CocoaPods：
      bash
      sudo gem install cocoapods
      CocoaPods 是 iOS 项目的依赖管理器。

针对 Android 开发 (macOS 或 Windows):

  • Android Studio：
    • 从 Android Studio 官网 (https://developer.android.com/studio) 下载并安装最新版 Android Studio。
    • 安装完成后，打开 Android Studio，进入 SDK Manager (Preferences > Appearance & Behavior > System Settings > Android SDK)。
    • 在 “SDK Platforms” 选项卡，选择一个推荐的 Android 版本（通常是最新稳定版）以及老一些的版本（如 29 或 30）作为构建目标。
    • 在 “SDK Tools” 选项卡，确保安装了以下组件：
      • Android SDK Build-Tools (最新版本)
      • Android Emulator
      • Android SDK Platform-Tools
      • Intel x86 Emulator Accelerator (HAXM installer) (如果使用 Intel CPU，强烈推荐安装以加速模拟器) 或 Android Emulator Hypervisor Driver for AMD Processors (如果使用 AMD CPU)。
    • 点击 “Apply” 或 “OK” 安装选中的组件。
  • 配置 ANDROID_HOME 环境变量：
    • 你需要配置 ANDROID_HOME 环境变量指向你的 Android SDK 路径。具体的路径取决于你的安装位置。
    • macOS: 在你的 shell 配置文件（如 ~/.bash_profile, ~/.zshrc）中添加以下行（请根据实际路径修改）：
      bash
      export ANDROID_HOME=$HOME/Library/Android/sdk
      export PATH=$PATH:$ANDROID_HOME/emulator
      export PATH=$PATH:$ANDROID_HOME/platform-tools
      然后运行 source ~/.bash_profile 或 source ~/.zshrc 使其生效。
    • Windows: 在系统环境变量中添加 ANDROID_HOME 变量，值为你的 Android SDK 路径（例如 C:\Users\你的用户名\AppData\Local\Android\Sdk）。然后编辑 Path 变量，添加 %ANDROID_HOME%\emulator 和 %ANDROID_HOME%\platform-tools。
  • 创建 Android 模拟器 (可选，但推荐)：
    • 在 Android Studio 中，打开 AVD Manager (Tools > AVD Manager)。
    • 点击 “+ Create Virtual Device…” 创建一个新的模拟器。选择一个设备定义和系统镜像。

环境搭建完成！ 使用 React Native CLI 需要更多步骤来配置原生环境。但一旦配置好，就可以完全控制你的 RN 项目。

第四部分：创建并运行第一个 React Native 应用

环境搭建完成后，我们来创建第一个 React Native 应用。

方法一：使用 Expo CLI 创建项目

  1. 创建新项目：
    • 打开终端或命令行，导航到你想创建项目的目录，然后运行：
      bash
      expo init MyFirstRNApp
    • Expo CLI 会询问项目模板。选择一个 Blank 模板（如 blank (TypeScript) 或 blank)，然后给项目起个名字（如 MyFirstRNApp）。
    • 等待依赖安装完成。
  2. 启动开发服务器：
    • 进入项目目录：
      bash
      cd MyFirstRNApp
    • 启动 Expo 开发服务器：
      bash
      expo start
      # 或使用 yarn
      yarn start
    • 这会打开一个浏览器窗口（Expo Dev Tools）并显示二维码。
  3. 在设备上运行：
    • 打开你手机上的 Expo Go 应用。
    • 使用 Expo Go 扫描浏览器中显示的二维码。
    • 如果手机和电脑在同一局域网，应用会自动加载并运行在你的手机上。
  4. 在模拟器/模拟器上运行 (可选):
    • 如果你的电脑上已经安装并启动了 iOS 模拟器或 Android 模拟器，在 Expo Dev Tools 页面点击 “Run on iOS simulator” 或 “Run on Android emulator”。

方法二：使用 React Native CLI 创建项目

  1. 创建新项目：
    • 打开终端或命令行，导航到你想创建项目的目录，然后运行：
      bash
      npx react-native init MyFirstRNApp --template react-native-template-typescript
      # 如果不想使用 TypeScript，去掉 --template ... 部分
      # npx 是 npm 5.2+ 自带的工具，用于运行 node_modules/.bin 下的可执行文件，避免全局安装 react-native-cli
    • npx 命令会下载并运行最新版本的 React Native CLI 来创建项目。等待依赖安装完成。
  2. 启动 Metro (React Native 的打包工具)：
    • 进入项目目录：
      bash
      cd MyFirstRNApp
    • 运行以下命令启动 Metro Bundler。在运行 iOS/Android 应用前，Metro 通常需要先启动。
      bash
      npx react-native start
    • 保持这个终端窗口开启。
  3. 在 iOS 模拟器上运行 (macOS only):
    • 打开一个新的终端窗口，进入项目目录。
    • 运行：
      bash
      npx react-native run-ios
    • 这会自动查找并启动一个 iOS 模拟器（如果没有运行），然后构建和安装应用。
  4. 在 Android 模拟器/设备上运行：
    • 确保你已经启动了一个 Android 模拟器（通过 Android Studio AVD Manager 启动）或将你的 Android 设备通过 USB 连接到电脑并开启了开发者选项和 USB 调试。
    • 打开一个新的终端窗口，进入项目目录。
    • 运行：
      bash
      npx react-native run-android
    • 这会自动查找运行中的模拟器或设备，然后构建和安装应用。

无论使用哪种方法，成功运行后，你将在模拟器或设备上看到一个基本的 React Native 应用界面，通常显示欢迎信息和一些链接。

第五部分：了解 React Native 的基本组件和概念

成功运行了第一个应用后，我们来了解构成 React Native 界面的基本元素。

1. 组件 (Components)

React Native 的界面完全由组件构建，这与 React Web 开发非常相似。你可以使用函数组件或类组件。

  • 函数组件 (Functional Components): 推荐使用，通常使用 hooks 管理状态。
    javascript
    function Welcome() {
    return (
    <Text>Hello, React Native!</Text>
    );
    }
  • 类组件 (Class Components): 较旧的写法，使用 this.state 和生命周期方法。
    javascript
    class Welcome extends React.Component {
    render() {
    return (
    <Text>Hello, React Native!</Text>
    );
    }
    }

2. 内置核心组件

React Native 提供了一套核心的内置组件，用于构建 UI。它们映射到原生平台的 UI 元素。

  • <View>: 最基础的容器组件，相当于 Web 中的 <div>，用于布局、样式和组织其他组件。它不直接显示任何东西，但支持 Flexbox 布局和样式。
  • <Text>: 用于显示文本的组件。在 React Native 中，所有文本都必须包含在 <Text> 组件内。 <View> 不能直接包含文本。
  • <Image>: 用于显示图片。支持加载本地图片 (require('./path/to/image.png')) 和网络图片 ({ uri: 'http://...' })。
  • <Button>: 一个简单的按钮组件，用于处理用户点击事件。它有一个 title 属性设置文本，一个 onPress 属性处理点击回调。样式自定义能力有限，更灵活的按钮通常用 TouchableHighlight 或 TouchableOpacity 包裹 <Text> 或 <View> 实现。
  • <TextInput>: 用于输入文本的组件。支持各种键盘类型、占位符、多行输入等。

示例：使用基本组件

修改你的 App.js 文件，尝试加入这些组件：

“`javascript
import React from ‘react’;
import { StyleSheet, Text, View, Image, Button, TextInput, SafeAreaView } from ‘react-native’;

export default function App() {
const [inputText, setInputText] = React.useState(”);

const handleButtonPress = () => {
alert(‘Button Pressed!’);
};

return (
// SafeAreaView 帮助内容避开刘海、状态栏等区域


欢迎来到 React Native 世界！
这是一个简单的示例。

  <Image
    source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
    style={styles.logo}
  />

  <TextInput
    style={styles.input}
    placeholder="请输入一些文本"
    value={inputText}
    onChangeText={setInputText}
  />

  <Text style={styles.inputTextDisplay}>
    你输入了：{inputText}
  </Text>

  <Button
    title="点击我"
    onPress={handleButtonPress}
  />
</SafeAreaView>

);
}

const styles = StyleSheet.create({
container: {
flex: 1, // 填充整个屏幕
backgroundColor: ‘#fff’,
alignItems: ‘center’, // 水平居中
justifyContent: ‘center’, // 垂直居中
paddingTop: 20, // 顶部内边距，SafeAreaView 可能已处理
},
greetingContainer: {
marginBottom: 20,
alignItems: ‘center’,
},
title: {
fontSize: 24,
fontWeight: ‘bold’,
marginBottom: 10,
},
logo: {
width: 50,
height: 50,
marginBottom: 20,
},
input: {
height: 40,
borderColor: ‘gray’,
borderWidth: 1,
width: ‘80%’, // 宽度占父容器的80%
paddingHorizontal: 10,
marginBottom: 10,
},
inputTextDisplay: {
fontSize: 16,
marginBottom: 20,
}
});
“`

保存文件后，如果你正在运行开发服务器，应用应该会自动刷新显示你的修改。

3. 样式 (Styling)

React Native 的样式类似于 CSS，但有一些关键区别：

  • 使用 JavaScript 对象定义样式： 样式是 JavaScript 对象，属性名通常使用驼峰命名法 (backgroundColor, fontSize) 而不是 CSS 的短横线命名法 (background-color, font-size)。
  • StyleSheet.create： 推荐使用 StyleSheet.create 方法创建样式对象。它会对样式进行优化、序列化和验证，提高性能。
  • Flexbox 布局： React Native 主要使用 Flexbox 进行布局。这是构建响应式和灵活界面的强大工具。
  • 没有级联： 样式不会像 CSS 那样级联。每个组件的样式都是独立的，并且可以通过传递 style prop 来应用多个样式对象（后面的会覆盖前面的）。
  • 单位： RN 中的尺寸单位通常是逻辑像素（density-independent pixels, dp），它会自动根据设备的屏幕密度进行缩放，以在不同设备上保持一致的物理尺寸观感。

在上面的示例中，我们已经使用了 StyleSheet.create 和一些基本的样式属性（flex, backgroundColor, alignItems, justifyContent, fontSize, fontWeight, width, height, borderColor, borderWidth, paddingHorizontal, marginBottom）。Flexbox 的 alignItems 和 justifyContent 分别控制了子元素在交叉轴和主轴上的对齐方式。

4. 属性 (Props) 和 状态 (State)

  • Props (属性): 用于父组件向子组件传递数据。Props 是只读的，子组件不能直接修改父组件传递的 Props。
  • State (状态): 用于组件管理自身内部的可变数据。当组件的状态改变时，组件会重新渲染。在函数组件中，使用 useState Hook 来管理状态；在类组件中，使用 this.state 和 this.setState。

在上面的示例中，inputText 就是一个通过 useState 管理的状态。TextInput 的 value 和 onChangeText 属性用于连接输入框的值和状态更新。Image 的 source 属性、Button 的 title 和 onPress 属性都是 Props。

第六部分：进一步学习资源与方向

恭喜你已经迈出了 React Native 的第一步！要深入学习和掌握 React Native，可以从以下方向入手：

  1. 官方文档： React Native 官方文档 (https://reactnative.dev/) 是最权威的学习资源，包含了详细的组件 API、指南和最佳实践。
  2. 导航 (Navigation)： 现代移动应用通常包含多个屏幕。学习如何使用像 React Navigation (https://reactnavigation.org/) 这样的库来实现屏幕间的跳转、堆栈导航、Tab 导航等。
  3. 网络请求： 学习如何在 React Native 应用中进行网络请求（例如使用 fetch 或 Axios）来获取或提交数据到后端 API。
  4. 数据存储： 了解如何在移动设备上存储数据，例如使用 AsyncStorage (简单的 key-value 存储) 或集成数据库 (如 SQLite)。
  5. 第三方库： 探索和学习使用社区开发的优秀第三方库，它们提供了各种功能，如 UI 组件库 (React Native Paper, NativeBase)、状态管理 (Redux, MobX)、表单处理 (Formik) 等。
  6. 原生模块与组件开发： 当遇到需要访问特定原生功能或实现复杂原生 UI 的场景时，学习如何编写自己的原生模块或原生组件。
  7. 性能优化： 学习如何诊断和解决 React Native 应用的性能瓶颈，例如减少桥接通信、优化渲染、使用 FlatList 处理长列表等。
  8. 打包与部署： 学习如何构建发布版本的 iOS (.ipa) 和 Android (.apk/.aab) 文件，并上传到 App Store 和 Google Play 商店。

结论

React Native 为使用 JavaScript 和 React 构建高性能、跨平台的原生移动应用提供了一条高效且强大的途径。通过理解其核心原理（特别是原生组件和桥接机制），并掌握基本组件、样式、状态和属性的使用，你就能快速上手开发自己的移动应用。

虽然 React Native 也存在一些挑战，例如原生环境配置和处理平台差异，但其带来的开发效率提升、热重载带来的愉悦开发体验以及活跃的社区生态，使其成为许多开发者和团队构建移动应用的优选框架。

希望这篇详细的介绍和上手指南能帮助你顺利进入 React Native 的世界，并开启你的移动开发之旅！不断实践，构建项目，你将能充分发挥 React Native 的潜力。祝你开发愉快！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部