新手必看：React Native 入门指南介绍

移动互联网时代，手机应用无处不在。无论是电商购物、社交互动，还是工具效率，App 已经成为我们生活中不可或缺的一部分。对于想要进入移动开发领域的新手来说，面对 iOS（Swift/Objective-C）和 Android（Java/Kotlin）两个截然不同的原生开发体系，往往感到无从下手。学习两套语言和框架不仅耗时耗力，开发和维护成本也随之翻倍。

幸运的是，跨平台移动开发框架应运而生，极大地简化了这一过程。而在众多跨平台方案中，由 Facebook（现 Meta）推出的 React Native 无疑是目前最受欢迎、生态最完善的选择之一。

本篇文章将带你全面了解 React Native，包括它是什么、为什么选择它、如何搭建开发环境、核心概念以及如何迈出你的第一步。无论你是一名 Web 前端开发者，还是完全没有编程经验的新手，只要对移动开发充满好奇，这篇指南都将为你指明方向。

第一部分：认识 React Native

1. React Native 是什么？

简单来说，React Native 是一个使用 JavaScript 和 React 库来构建原生移动应用的框架。

请注意其中的关键词：原生。这与一些基于 WebView（类似网页浏览器）的跨平台框架（如 Ionic, Cordova/PhoneGap）不同。React Native 并不会在应用中嵌入一个网页浏览器来显示界面，而是通过 JavaScript 代码调用底层的原生 UI 组件和模块，最终渲染出真正的原生控件。这意味着你的应用界面看起来、感觉起来都和使用原生语言开发的应用别无二致，同时还能获得接近原生的性能。

React Native 基于 React 的思想。如果你熟悉 React 开发 Web 应用，你会发现 React Native 的组件化、单向数据流、JSX 语法等概念都与 React 非常相似。这使得 Web 前端开发者能够以较低的学习成本快速过渡到移动开发领域。

它的核心理念是“Learn once, write anywhere”（学一次，写到任何地方）。这里的“anywhere”主要指 iOS 和 Android 平台。你只需要用 JavaScript 编写一套业务逻辑代码，React Native 框架会负责将其“翻译”成对应的原生代码，分别运行在 iOS 和 Android 设备上。当然，“写一次，到处运行”并不意味着完全没有平台差异，有时仍需要针对特定平台进行微调，但相比完全写两套原生代码，效率已经大幅提升。

2. React Native 的工作原理浅析

React Native 的工作流程可以简化理解为：

JavaScript 线程： 你的 React Native 应用代码运行在一个独立的 JavaScript 线程中。这个线程负责处理应用的业务逻辑、组件的渲染、状态管理等。
原生线程： 设备的原生 UI 渲染、系统 API 调用等发生在主的原生线程中。
Bridge（桥接）： 连接 JavaScript 线程和原生线程的桥梁。当 JavaScript 需要更新 UI（例如点击按钮后改变文本）或调用原生功能（例如访问相机）时，它会发送消息通过 Bridge 传递给原生线程；原生线程执行相应操作后，也可以通过 Bridge 将结果或事件（例如用户输入）传回给 JavaScript 线程。

正是这个 Bridge 机制，使得 JavaScript 能够“指挥”原生控件进行渲染和操作。尽管 Bridge 在频繁通信时可能会引入一定的开销，但对于绝大多数应用场景，React Native 提供的性能已经足够出色。

第二部分：为什么选择 React Native？

了解了 React Native 是什么，那么它有哪些优势和劣势，让你值得选择它呢？

1. 优势 (Pros)

跨平台开发，降低成本和时间： 这是最核心的优势。一套代码库同时支持 iOS 和 Android，极大地减少了开发时间和人力成本。对于创业公司或资源有限的团队尤其有吸引力。
接近原生的性能： 不同于基于 WebView 的框架，React Native 渲染的是真正的原生 UI 组件。动画流畅度、响应速度等方面都能提供接近原生的体验。
JavaScript 和 React 生态： 全球庞大的 JavaScript 开发者社区和成熟的 React 生态是其坚实后盾。丰富的第三方库、工具和成熟的前端开发模式（如组件化、声明式UI）可以直接沿用。
热重载 (Hot Reloading) 和快速刷新 (Fast Refresh)： 开发效率极高。修改代码后，应用无需完全重新编译或刷新，界面即可实时更新，甚至能保留应用当前的运行状态，极大地加快了调试速度。
代码可复用性： 除了 UI 部分可能需要平台差异处理外，大量的业务逻辑代码（如网络请求、数据处理、状态管理）可以在不同平台间共享。
庞大活跃的社区支持： 作为最流行的跨平台框架之一，React Native 拥有庞大的开发者社区。遇到问题时，很容易在网上找到解决方案、教程或获得社区成员的帮助。
易于集成原生代码： 如果你需要访问某个特定的原生功能（如某些硬件传感器）或者某个功能用原生实现性能更高，React Native 允许你编写原生模块并通过 Bridge 暴露给 JavaScript 调用，实现了良好的原生集成能力。
声明式 UI： 沿袭 React 的声明式编程范式，使得构建复杂的用户界面变得更加直观和易于维护。你只需要描述 UI 在不同状态下应该是什么样子，框架会负责高效地更新界面。

2. 劣势 (Cons)

并非“写一次，到处运行”： 虽然代码可复用性高，但有时为了适配不同平台的设计规范（如导航栏样式、组件外观）或处理特定的硬件/API 调用，仍然需要编写一些平台相关的代码。
原生模块的限制或复杂性： 对于某些底层或最新的原生功能，React Native 可能没有内置的模块支持。你需要自己编写原生模块并进行 Bridge 连接，这需要具备一定的原生开发知识。
潜在的性能瓶颈： 尽管性能接近原生，但在处理大量复杂动画、高频率交互或密集计算时，Bridge 的通信开销可能会导致性能不如纯原生应用。不过，随着 React Native 架构的不断优化（如 JSI/TurboModules 正在减少 Bridge 依赖），这一问题正在缓解。
依赖第三方库的成熟度： 许多高级功能（如导航、相机、地图等）需要依赖社区提供的第三方库。这些库的质量、维护状态和文档完善程度参差不齐，选择时需要谨慎。
版本升级： React Native 版本迭代较快，有时升级版本可能会遇到兼容性问题，特别是当你的项目依赖较多第三方库时。
抽象层带来的学习曲线： 虽然基础易学，但要深入理解其工作原理、调试复杂的原生交互问题，需要对 Bridge、原生模块等方面有所了解，这引入了额外的学习成本。
包体积： 相对于纯原生应用，React Native 应用通常会包含 JavaScript 引擎、框架代码等，导致打包后的应用体积略大。

总结： 对于大多数日常应用开发来说，React Native 的优势是压倒性的。它能以更低的成本和更高的效率构建出高性能的移动应用。其劣势主要体现在需要深度定制或极致性能的特定场景，以及对原生特性的早期支持方面。对于新手入门或快速开发应用，React Native 是一个极佳的选择。

第三部分：入门准备：你需要知道什么？

在正式开始 React Native 开发之前，你需要具备一些基础知识和安装一些必要的工具。

1. 前置知识 (Prerequisites)

JavaScript 基础： 这是必须的。你需要了解变量、数据类型、函数、对象、数组、异步编程（Promise, async/await）等基础概念。
ES6+ 语法： React Native 开发大量使用了 ES6+（ECMAScript 2015 及更新版本）的新特性，如箭头函数、解构赋值、模块化 (import/export)、类等。熟悉这些语法将非常有帮助。
React 基础（可选但强烈推荐）： 虽然不是强制要求，但如果你了解 React 的核心概念，如组件、JSX、Props、State、生命周期（或 Hook），学习 React Native 会事半功倍，因为它们的设计思想和很多API是共享的。如果你不了解 React，也没关系，可以边学 React Native 边同步学习 React 的基础。
Node.js 和 npm/yarn： React Native 的开发环境和工具链依赖于 Node.js。npm (Node Package Manager) 或 yarn 是用于管理项目依赖的包管理器。

2. 准备工作：安装 Node.js 和包管理器

请确保你的电脑上已经安装了 Node.js。建议安装 LTS (长期支持) 版本。

访问 Node.js 官网 (https://nodejs.org/) 下载并安装适合你操作系统的版本。
安装完成后，打开终端或命令行工具，输入以下命令检查 Node.js 和 npm 是否安装成功：

bash node -v npm -v
现代 Node.js 版本通常会自带 npm。如果你倾向于使用 yarn，可以全局安装它：

bash npm install -g yarn

检查 yarn 是否安装成功：

bash yarn -v

第四部分：搭建开发环境：Expo 还是 React Native CLI？

搭建 React Native 开发环境有两种主要方式：

Expo CLI (推荐给新手)： Expo 是一个开源平台，提供了一系列工具和服务，可以极大地简化 React Native 应用的开发、构建和部署流程。它内置了许多常用的原生模块，无需配置复杂的原生环境（Xcode、Android Studio），尤其适合新手快速入门和迭代。它的缺点是当你需要使用 Expo 未支持的特定原生功能时，可能需要“eject”到 React Native CLI 项目，或者寻找其他解决方案。
React Native CLI： 这是官方提供的底层命令行工具。使用它创建的项目是一个标准的 React Native 项目，对原生代码有完全的控制权。但这也意味着你需要自己安装和配置 Xcode (macOS, 用于 iOS 开发) 和 Android Studio (用于 Android 开发)，并管理相关的依赖和编译环境， setup 过程相对复杂。

对于初学者，强烈建议从 Expo 入门。 它能让你快速跳过繁琐的环境配置，直接开始编写应用代码。

下面我们将详细介绍如何使用 Expo 搭建开发环境。

使用 Expo CLI 搭建开发环境 (Windows/macOS/Linux)

安装 Expo Go App (在你的手机上)：
- 对于 iOS 设备：在 App Store 搜索并安装 “Expo Go”。
- 对于 Android 设备：在 Google Play 商店搜索并安装 “Expo Go”。或者，如果你在中国大陆，可以在某些第三方应用商店搜索并安装。
- 这个 App 允许你在手机上快速预览和运行你的 React Native 应用，无需通过数据线连接或复杂的设置。
全局安装 Expo CLI (现在通常使用 npx)：
- 打开终端或命令行工具。
- 运行以下命令来使用 npx 执行 create-expo-app 工具：
bash npx create-expo-app my-first-rn-app
（my-first-rn-app 是你的项目名称，可以替换成其他名字）

npx 会检查你的系统是否安装了 create-expo-app，如果没有，它会临时下载并运行最新版本。这是官方推荐的创建新项目的方式。
等待项目创建完成：
- 命令执行后，create-expo-app 会询问你选择哪种项目模板。通常选择 blank (空白项目) 即可。按回车确认。
- 工具会自动为你创建一个新的项目文件夹 my-first-rn-app，并安装所需的依赖。这个过程可能需要一些时间，请耐心等待。
进入项目目录：

bash cd my-first-rn-app
启动开发服务器：

“`bash
npx expo start

或者如果之前全局安装了 yarn 且项目使用 yarn，可以运行：yarn start

“`

运行此命令后，Expo CLI 会启动一个本地开发服务器，并在终端输出一个二维码 (QR code) 以及一些链接地址。
在手机上打开应用：
- 打开你手机上安装的 Expo Go 应用。
- 在 Expo Go 中，选择扫描二维码的选项（通常在首页或右上角）。
- 扫描终端中显示的二维码。
- 如果手机和电脑处于同一个局域网，Expo Go 会自动加载你的应用并在手机上显示出来。
- 替代方法： 如果扫描二维码有问题，你也可以尝试通过局域网地址或隧道连接。Expo CLI 启动后会显示类似 exp://<你的局域网IP>:<端口> 的地址。确保你的手机和电脑连接的是同一个 Wi-Fi。在 Expo Go App 中手动输入这个地址也可以启动应用。隧道连接 (Tunnel) 允许你在不同的网络环境下连接，但速度可能较慢。
开始编写代码：
- 使用你喜欢的代码编辑器（如 VS Code, Sublime Text 等）打开项目文件夹 my-first-rn-app。
- 找到 App.js 文件。这是应用的入口文件。
- 修改其中的代码，保存后，你会发现手机上的应用界面会立即刷新，显示你的修改！这就是快速刷新 (Fast Refresh) 的魔力。

至此，你的 React Native 开发环境就搭建成功了！

第五部分：你的第一个 React Native 应用 (Hello World)

一个标准的 Expo 创建的 App.js 文件通常是这样的：

“`javascript
import { StatusBar } from ‘expo-status-bar’;
import { StyleSheet, Text, View } from ‘react-native’;

export default function App() {
return (

Open up App.js to start working on your app!

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: ‘#fff’,
alignItems: ‘center’,
justifyContent: ‘center’,
},
});
“`

让我们来解析一下这段代码：

import ... from 'react-native';：从 react-native 库中导入核心组件和 API。View, Text, StyleSheet 是最常用的。StatusBar 通常从 expo-status-bar 导入，用于控制设备状态栏的样式。
export default function App() { ... }：定义一个名为 App 的函数式组件。这是应用的根组件。export default 使得这个组件可以在其他文件中被导入。
return (...)：组件返回 JSX 语法描述的 UI 结构。
<View style={styles.container}> ... </View>：<View> 是 React Native 中最基础的容器组件，类似于 Web 中的 <div>。它可以用来布局、包裹其他组件。style={styles.container} 将一个样式对象应用到这个 View 组件上。
<Text> ... </Text>：<Text> 组件用于显示文本。请注意： 在 React Native 中，所有文本内容必须放在 <Text> 组件内部，你不能直接在 <View> 或其他非文本组件内放置文本字符串。
<StatusBar style="auto" />：一个 Expo 组件，用于控制设备状态栏的样式。
const styles = StyleSheet.create({ ... });：使用 StyleSheet.create 方法创建一个样式对象。这是 React Native 推荐的样式定义方式，可以提高性能并更好地组织样式。样式属性名通常使用驼峰命名法 (camelCase)，值是字符串或数字。布局主要依赖 Flexbox。

现在，让我们修改一下 App.js 来显示一个简单的 “Hello, React Native!”：

“`javascript
import { StatusBar } from ‘expo-status-bar’;
import { StyleSheet, Text, View } from ‘react-native’;

export default function App() {
return (
// View 是一个容器，flex: 1 让它充满整个屏幕
// backgroundColor 设置背景颜色
// alignItems 和 justifyContent 用于在主轴和交叉轴上对齐子元素

{/ Text 组件用来显示文本 /}
Hello, React Native!

  {/* 可以添加另一个 Text 组件 */}
  <Text>这是我的第一个应用。</Text>

  {/* 控制状态栏样式 */}
  <StatusBar style="auto" />
</View>

);
}

// StyleSheet.create 创建样式对象，可以提高性能和代码组织性
const styles = StyleSheet.create({
container: {
flex: 1, // 让容器填充可用空间
backgroundColor: ‘#f0f0f0’, // 设置一个浅灰色背景
alignItems: ‘center’, // 在交叉轴（垂直方向，因为 flexDirection 默认为 column）居中对齐子元素
justifyContent: ‘center’, // 在主轴（垂直方向）居中对齐子元素
},
greeting: {
fontSize: 24, // 设置字体大小
fontWeight: ‘bold’, // 设置字体粗细
color: ‘blue’, // 设置字体颜色
marginBottom: 20, // 底部外边距
},
});
“`

保存 App.js 文件，你的手机上的 Expo Go 应用应该会自动刷新，显示出修改后的界面。恭喜你，你已经成功运行了你的第一个 React Native 应用！

第六部分：React Native 的核心概念

掌握以下几个核心概念，将有助于你更深入地理解和编写 React Native 应用。

1. 组件 (Components)

一切皆组件。React Native 应用的界面是由各种组件构建而成的。组件是独立的、可复用的 UI 模块。

函数式组件 (Functional Components): 使用 JavaScript 函数定义。它们接收 props 作为参数，并返回描述 UI 的 JSX 元素。现代 React 和 React Native 开发中，函数式组件结合 Hooks 是主流。
类组件 (Class Components): 使用 JavaScript 类定义，继承自 React.Component。它们拥有自己的 state 和生命周期方法。在 Hooks 出现之前是主流，现在依然兼容。

上面的 “Hello World” 例子中，App 就是一个函数式组件。<View> 和 <Text> 则是 React Native 提供的内置组件。

2. JSX

JSX 是一种 JavaScript 的语法扩展，它允许你在 JavaScript 代码中编写类似 HTML 的结构。React 和 React Native 都使用 JSX 来描述 UI。

javascript // JSX 示例 <View style={styles.container}> <Text>Hello</Text> </View>

JSX 最终会被 Babel 编译成普通的 JavaScript 函数调用（例如 React.createElement）。
在 JSX 中嵌入 JavaScript 表达式时，使用花括号 {}，例如 <Text>{userName}</Text>。
JSX 标签必须有唯一的根元素（例如 <View> 或 <Fragment> 包裹）。
HTML 中的 class 属性在 React Native 中对应 style 属性，并使用 StyleSheet 定义样式对象。

3. Props (属性)

Props 是父组件向子组件传递数据的方式。它是单向数据流，即数据总是从父组件流向子组件。子组件通过函数参数或 this.props (类组件) 接收 props，且不应该直接修改接收到的 props。

“`javascript
function Greeting(props) {
return (

Hello, {props.name}!

);
}

// 在父组件中使用
function App() {
return (

);
}
“`

4. State (状态)

State 是组件内部管理的数据，这些数据可以在组件的生命周期内发生变化，并且状态的变化通常会导致组件的重新渲染。在函数式组件中，使用 useState Hook 来管理状态。

“`javascript
import React, { useState } from ‘react’;
import { Button, Text, View } from ‘react-native’;

function Counter() {
// 声明一个状态变量 count，初始值为 0
const [count, setCount] = useState(0);

return (

Count: {count}
{/ 点击按钮时，调用 setCount 更新状态 /}

新手必看：React Native 入门指南介绍 – wiki基地