React Native 基础入门：一篇给初学者的中文介绍 – wiki基地

---

React Native 基础入门：一篇给初学者的中文介绍

欢迎来到移动应用开发的世界！如果你对构建跨平台的原生应用充满兴趣，但又不想同时学习 Swift/Objective-C (iOS) 和 Java/Kotlin (Android) 这两套完全不同的技术栈，那么 React Native 绝对值得你关注。

作为 Facebook (现 Meta) 开源的一个强大框架，React Native 允许你使用 JavaScript 和 React 来构建真正意义上的 原生 移动应用。这意味着你可以编写一套代码，然后将其部署到 iOS 和 Android 两个平台，并且用户体验几乎与使用原生语言开发的应用无异。

这篇文章将为你提供一个详细的 React Native 入门指南，从它是什么、为什么使用它，到如何搭建环境、理解核心概念，再到构建一个简单的应用。让我们一步步深入了解这个迷人的技术。

1. 什么是 React Native？

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

这里的关键词是“原生”。与一些仅仅是将网页内容打包进 App 壳子的混合开发框架（如 Cordova/Ionic）不同，React Native 并不使用 WebView 来渲染界面。它使用 JavaScript 代码来调用和控制原生平台（iOS 和 Android）的 UI 组件。

例如，你在 React Native 中编写一个 <Text> 组件，它在 iOS 上会渲染成一个 UITextView，在 Android 上会渲染成一个 TextView。这些都是操作系统提供的标准原生 UI 元素，因此应用的性能和用户体验能够达到与纯原生应用非常接近的水平。

你可以把它想象成：React Native 提供了一层“桥梁”，让 JavaScript 代码能够指挥底层的原生系统去创建、布局和更新界面元素，以及访问设备的原生能力（如摄像头、地理位置、传感器等）。

2. 为什么选择 React Native？（优点与考量）

React Native 之所以受到广泛欢迎，主要得益于其诸多优势：

• 跨平台开发 (Cross-Platform Development): 这是最突出的优点。一套代码可以同时运行在 iOS 和 Android 平台上，大大减少了开发时间和成本。据官方说法，大部分业务逻辑代码可以共享，UI 部分也高度可复用。
• 原生性能 (Native Performance): 如前所述，React Native 渲染的是原生 UI 组件，而不是 Web 组件。这意味着应用在滑动流畅度、响应速度等方面通常比基于 WebView 的混合应用更好。JavaScript 代码运行在一个单独的线程中，与原生 UI 线程分离，避免了阻塞 UI。
• 快速开发周期 (Faster Development Cycles): 结合 React 的声明式编程范式和 React Native 提供的“热重载”(Hot Reloading) 或“快速刷新”(Fast Refresh) 功能，开发者可以实时看到代码修改的效果，极大地提高了开发效率。
• 学习曲线相对平缓 (If You Know React): 如果你已经熟悉 Web 开发中的 React，那么上手 React Native 会非常快，因为它们共享许多核心概念（如组件、Props、State、JSX）。你只需要学习 React Native 提供的原生组件和特定 API。
• 庞大的社区和生态系统 (Large Community & Ecosystem): React 和 React Native 都有着庞大的开发者社区，这意味着你可以轻松找到学习资源、解决问题的方案和大量的第三方库。许多常用的功能（如导航、状态管理、网络请求等）都有成熟的库支持。
• 访问原生功能 (Access to Native Features): React Native 提供了访问设备原生 API 的能力。如果某些特定的原生功能没有现成的 React Native 模块，你也可以编写原生代码（Swift/Kotlin/Java/Objective-C）并通过“原生模块”的方式暴露给 JavaScript 使用。
• 代码重用 (Code Reusability): 除了跨平台共享应用代码，如果你同时进行 Web 开发，部分业务逻辑（如数据处理、API 调用）甚至可以在 React Web 应用和 React Native 应用之间共享。

当然，React Native 并非银弹，也存在一些需要考量的点：

• 并非“一次编写，到处运行” (Write Once, Run Anywhere): 更准确的说法是“学习一次，编写任何平台”(Learn Once, Write Anywhere)。虽然大部分代码可以共享，但针对特定平台的功能、UI 细节、性能优化有时仍需要编写平台相关的代码。
• 原生模块的复杂性: 当你需要使用某个 React Native 库但它依赖原生模块时，或者需要自己编写原生模块时，你可能需要一定的原生开发知识来配置或调试。
• 更新频率: React Native 本身以及其生态系统更新较快，有时可能需要处理版本兼容性问题。
• 抽象层的开销: 尽管性能接近原生，但在某些极端复杂的场景或需要高度定制原生 UI 的情况下，原生开发可能仍是更优的选择。React Native 的桥接层也存在一定的通信开销（尽管通常可以忽略）。

总的来说，对于大多数企业级应用、工具类应用或内容展示类应用，React Native 都是一个高效且优秀的跨平台开发解决方案。

3. React Native 的工作原理（简单了解）

如前所述，React Native 的核心是其“桥梁”(Bridge) 机制。

当你运行一个 React Native 应用时：

1. JavaScript 代码执行: 你的 React Native JavaScript 代码在一个独立的 JavaScript 线程中运行。
2. 调用原生模块/UI: 当你需要渲染 UI（例如 <Text>你好世界</Text>) 或访问原生能力（例如调用相机），JavaScript 线程会通过桥梁向原生线程发送消息。
3. 原生层处理: 原生线程接收到消息后，会执行相应的原生操作。对于 UI，它会创建、配置和布局真正的原生 UI 组件（如 iOS 的 UILabel，Android 的 TextView）。对于原生能力，它会调用相应的原生 API。
4. 结果返回: 如果原生操作有结果（例如拍照成功后返回照片路径），原生线程也会通过桥梁将结果发送回 JavaScript 线程。

这个桥梁机制是异步的，保证了 JavaScript 代码的执行不会阻塞原生 UI 的渲染，从而保证了应用的流畅性。

4. 搭建开发环境

这是开始 React Native 开发的第一步，也是有时会让初学者感到困惑的一步。幸运的是，React Native 提供了两种主要的环境搭建方式：

• Expo CLI: 强烈推荐给初学者。Expo 是一个开源工具集和平台，它简化了 React Native 的开发流程。它封装了许多复杂的原生配置和构建过程，让你几乎可以完全在 JavaScript 环境中开发，并通过 Expo Go 应用在真机或模拟器上预览。无需安装 Xcode 或 Android Studio（除非你需要构建最终的发布包）。
• React Native CLI: 这种方式提供了对原生项目的完全控制权。你需要安装和配置完整的 iOS (Xcode) 和 Android (Android Studio) 开发环境。当你需要集成复杂的原生第三方库或编写原生模块时，通常需要使用这种方式。

对于初学者，我们强烈建议从 Expo CLI 开始。它能让你快速看到成果，降低入门门槛。

使用 Expo CLI 搭建环境步骤：

1. 安装 Node.js: React Native 和 Expo 都依赖 Node.js 环境。请访问 Node.js 官网 下载并安装最新 LTS (长期支持) 版本。安装完成后，打开终端或命令行工具，输入 node -v 和 npm -v 检查是否安装成功。
2. 全局安装 Expo CLI: 打开终端或命令行，运行以下命令安装 Expo 命令行工具：
   bash
npm install -g expo-cli
# 或者使用 npx (推荐，无需全局安装):
# npx create-expo-app your-project-name
   这里的 npm 是 Node.js 安装自带的包管理器。
3. 在手机上安装 Expo Go 应用: 在你的 iOS 或 Android 手机上，打开应用商店搜索 “Expo Go” 并安装它。这个应用是用来扫描二维码并在真机上预览你的 React Native 应用的。
4. 创建新的 React Native 项目: 打开终端或命令行，切换到你想要创建项目的文件夹，然后运行以下命令：
   bash
npx create-expo-app my-first-rn-app
my-first-rn-app 是你的项目名称，你可以自定义。npx 是一个工具，可以用来执行 Node.js 包的可执行文件，而无需事先全局安装。按照提示选择一个模板，对于初学者，选择 blank 模板（一个干净的空白项目）即可。
5. 进入项目目录并启动开发服务器:
   bash
cd my-first-rn-app
npx expo start
   运行 npx expo start 会启动 Expo 的开发服务器。它会在浏览器中打开 Expo Dev Tools 页面，并在终端显示一个二维码。
6. 在手机上预览应用:
   • 真机: 打开手机上的 Expo Go 应用，扫描终端中显示的二维码。如果手机和电脑在同一个 Wi-Fi 网络下，你的应用就会在手机上加载并运行起来。
   • 模拟器/虚拟机: 如果你已经安装了 Xcode (iOS) 或 Android Studio (Android) 并设置好了模拟器或虚拟机，可以在 Expo Dev Tools 页面或终端中选择相应的选项来在模拟器中运行。

恭喜你！你已经成功搭建了 React Native 开发环境并启动了你的第一个项目。

5. React Native 的核心概念

现在我们有了一个运行中的项目，让我们看看组成 React Native 应用的基本元素。

5.1 组件 (Components)

组件是 React Native 应用的构建基石。它们是独立、可重用的 UI 单元。就像搭乐高积木一样，你可以将各种组件组合起来构建复杂的界面。

在 React Native 中，我们主要使用函数组件 (Functional Components)，它们是简单的 JavaScript 函数，接收一个 props 对象作为参数，并返回描述 UI 的 JSX 元素。

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

// 这是一个简单的函数组件
function Greeting(props) {
return (

你好, {props.name}!

);
}

export default Greeting; // 导出组件供其他地方使用
“`

React Native 内置了许多核心组件，它们是对原生 UI 元素的封装：

• View: 最基本的容器组件，类似于 Web 中的 <div>。用于布局、样式化和组织其他组件。
• Text: 用于显示文本。注意： 在 React Native 中，所有的文本必须包含在 <Text> 组件内。
• Image: 用于显示图片。
• ScrollView: 提供滚动功能。
• TextInput: 用于接收用户输入的文本框。
• Button: 一个简单的按钮。
• TouchableOpacity / Pressable: 用于创建可点击区域，点击时有视觉反馈。

还有很多其他组件用于列表 (FlatList, SectionList)、状态指示 (ActivityIndicator) 等。

5.2 JSX

JSX 是 JavaScript 的一个语法扩展，它允许你在 JavaScript 代码中编写看起来像 XML/HTML 的结构。React 和 React Native 使用 JSX 来描述 UI 的结构。

“`javascript
// 这是一个 JSX 表达式
const uiElement = Hello, React Native!;

// 可以在组件的 return 语句中使用 JSX
function App() {
return (

欢迎!
{/ 在 JSX 中使用自定义组件 /}

);
}
“`

JSX 最终会被 Babel 这样的工具转换成普通的 JavaScript 函数调用（例如 <Text> 会变成 React.createElement(Text, ...)），所以浏览器或原生环境最终运行的还是 JavaScript。

虽然 JSX 看起来像 HTML，但有一些重要的区别，比如：

• 属性使用 camelCase (驼峰命名法)，而不是 kebab-case (烤串命名法)，例如 backgroundColor 而不是 background-color。
• 样式是 JavaScript 对象，而不是 CSS 字符串（后面会详细介绍）。
• 类名使用 className 在 Web React 中，但在 React Native 中没有直接的等价物（样式通过 style 属性应用）。

5.3 Props

Props (属性，Properties 的缩写) 是父组件向子组件传递数据的方式。它们是只读的，子组件不应该修改接收到的 props。

“`javascript
// Parent Component
function App() {
return (

{/ 将 name=”世界” 作为 props 传递给 Greeting 组件 /}



);
}

// Child Component (receives props)
function Greeting(props) {
return (

你好, {props.name}! {/ 使用 props.name /}

);
}
“`

Props 是组件之间通信（通常是自上而下）的主要方式。

5.4 State

State (状态) 是组件内部管理的可变数据。当组件的状态发生变化时，组件会重新渲染，更新 UI。State 通常用于存储那些会随着用户交互或时间推移而改变的数据，例如计数器的值、文本输入框的内容、开关的状态等。

在函数组件中，我们使用 useState Hook 来管理状态。

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

function Counter() {
// 声明一个状态变量 ‘count’，并初始化为 0
// setCount 是一个函数，用于更新 count
const [count, setCount] = useState(0);

const handleIncrement = () => {
// 使用 setCount 函数更新状态
setCount(count + 1);
};

return (

计数: {count}


);
}
“`

当 setCount 被调用时，React Native 会知道 Counter 组件的状态发生了变化，并会重新渲染这个组件，UI 上的 count 值也会随之更新。

Props 和 State 是 React/React Native 开发中最重要的两个概念。Props 是外部给定的、不可变的数据；State 是组件内部维护的、可变的数据。

6. 构建你的第一个 React Native 应用 (Hello World)

当你使用 npx create-expo-app my-first-rn-app 创建项目后，项目的根目录会包含一些文件和文件夹。其中最重要的入口文件通常是 App.js 或 App.tsx (如果你选择了 TypeScript 模板)。

让我们看看 App.js 的默认内容（可能会因 Expo 版本略有差异）：

“`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 ...: 导入所需的模块。Text, View, StyleSheet 是 React Native 提供的核心组件和 API。StatusBar 来自 Expo，用于控制状态栏样式。
• export default function App() { ... }: 定义并导出一个名为 App 的函数组件。这是应用的根组件。
• return (...): 组件返回 JSX，描述要渲染的 UI 结构。
• <View style={styles.container}> ... </View>: 一个 View 组件作为最外层的容器，应用了一个名为 container 的样式。
• <Text> ... </Text>: 显示一段文本。
• <StatusBar style="auto" />: Expo 组件，用于根据背景颜色自动调整状态栏文本颜色。
• const styles = StyleSheet.create({ ... });: 使用 StyleSheet.create 方法创建一个样式对象。这种方式创建的样式表经过优化，性能更好，并提供一些验证。

现在，让我们修改它，让它显示“你好，React Native！”并添加一个简单的交互。

“`javascript
import React, { useState } from ‘react’; // 导入 useState Hook
import { StatusBar } from ‘expo-status-bar’;
import { StyleSheet, Text, View, Button, Alert } from ‘react-native’; // 导入 Button 和 Alert

export default function App() {
const [message, setMessage] = useState(‘你好，React Native！’); // 使用状态管理文本

const handlePress = () => {
Alert.alert(‘提示’, ‘按钮被点击了！’); // 弹出原生提示框
// 也可以修改状态，例如：
// setMessage(‘按钮被点击了！’);
};

return (

{message} {/ 使用状态变量 /}

);
}

const styles = StyleSheet.create({
container: {
flex: 1, // 占据所有可用空间
backgroundColor: ‘#f0f0f0’, // 背景颜色
alignItems: ‘center’, // 子元素水平居中
justifyContent: ‘center’, // 子元素垂直居中
padding: 20, // 内边距
},
greetingText: {
fontSize: 24, // 字体大小
fontWeight: ‘bold’, // 字体加粗
marginBottom: 20, // 底部外边距
color: ‘#333’, // 文本颜色
},
});
“`

保存文件后，如果你的 Expo 开发服务器正在运行并且手机或模拟器连接正常，你会立即看到界面的更新（这得益于快速刷新功能）。点击按钮，你会看到一个原生的提示框弹出。

这个简单的例子包含了前面提到的核心概念：

• 组件: App, View, Text, Button, StatusBar, Alert (Alert 不是组件，是 API，但也是从 react-native 导入)。
• JSX: 在 return 语句中使用了类似 HTML 的结构。
• State: 使用 useState 管理 message 文本。虽然在这个例子中我们没有修改 message，但结构上展示了如何定义和使用状态。
• Props: Button 组件接收 title 和 onPress 作为 props。View 和 Text 接收 style 作为 props。
• 样式: 使用 StyleSheet.create 定义样式对象，并通过 style prop 应用。

7. 样式 (Styling)

React Native 的样式语法与 Web CSS 非常相似，但有一些重要的区别：

• JavaScript 对象: 样式是用 JavaScript 对象来写的，属性名使用驼峰命名法 (fontSize, backgroundColor)。
• 没有级联和继承: 样式不会自动级联。每个组件的 style 属性只影响该组件本身。文本相关的样式（如 fontSize, color）也不会像 CSS 那样自动继承给子元素，你需要在每个 <Text> 组件上显式设置。
• 布局主要依靠 Flexbox: React Native 使用 Flexbox 进行布局，这是创建响应式和灵活界面的强大工具。理解 Flexbox 是构建复杂布局的关键。
• StyleSheet.create: 推荐使用 StyleSheet.create 来创建样式对象，它可以提高性能并通过 ID 引用样式，也使得样式代码更清晰。
• style 属性: 使用 style 属性将样式对象应用到组件上。可以传递一个样式对象，也可以传递一个数组来组合多个样式对象（数组后面的样式会覆盖前面的同名属性）。

“`javascript
行内样式

使用 StyleSheet 创建的样式

组合样式
“`

Flexbox 基础:

• 默认情况下，React Native 中的容器 (View) 的 display 属性是 flex，flexDirection 是 column。
• flex: 1：让组件填充可用空间。
• flexDirection: 'row' 或 'column'：决定主轴方向。
• justifyContent: 控制主轴上的子元素对齐方式（flex-start, center, flex-end, space-between, space-around）。
• alignItems: 控制交叉轴上的子元素对齐方式（flex-start, center, flex-end, stretch, baseline）。
• alignSelf: 控制单个子元素在交叉轴上的对齐方式，覆盖父容器的 alignItems。
• padding 和 margin: 支持 paddingTop, paddingBottom, paddingLeft, paddingRight, paddingVertical, paddingHorizontal, padding, 以及对应的 margin 属性。

深入理解 Flexbox 对于 React Native 布局至关重要，建议查阅相关文档进行学习。

8. 进一步学习方向

恭喜你迈出了 React Native 入门的第一步！这仅仅是冰山一角。要成为一名熟练的 React Native 开发者，你还需要学习更多内容：

• 更多核心组件和 API: 了解 FlatList (高性能列表)、SectionList、Modal、Pressable 等组件，以及 Dimensions (获取屏幕尺寸)、Platform (判断当前平台) 等 API。
• 导航 (Navigation): 真实的 App 需要在不同屏幕之间切换。最流行的导航库是 React Navigation。学习如何设置堆栈导航、底部标签导航、抽屉导航等。
• 数据获取 (Fetching Data): 学习如何在 React Native 应用中调用 API 获取数据，例如使用 fetch API 或第三方库 Axios。
• 状态管理 (State Management): 对于大型应用，使用 useState 在组件之间传递状态会变得复杂。学习更高级的状态管理方案，如 Context API (React 内置)、Redux、MobX 或 Zustand。
• 原生模块 (Native Modules) 和原生 UI 组件 (Native UI Components): 当需要访问特定的原生功能或创建高度定制的 UI 时，学习如何编写和桥接原生代码。
• 调试技巧: 学习如何使用 Chrome 开发者工具调试 JavaScript 代码，使用 Metro Bundler 的错误报告，以及如何查看原生日志。
• 测试: 了解如何为 React Native 组件编写单元测试和集成测试。
• 部署: 学习如何打包你的应用并发布到 App Store (iOS) 和 Google Play Store (Android)。

9. 总结

React Native 是一个令人兴奋的框架，它通过结合 Web 前端开发的优势（JavaScript, React, 快速迭代）与原生移动开发的性能和体验，为构建跨平台应用提供了一条高效的途径。

本文从 React Native 的定义、优势与考量、基本工作原理讲起，详细介绍了如何使用 Expo CLI 搭建开发环境，并深入讲解了组件、JSX、Props 和 State 这四个核心概念。最后，我们通过一个简单的“你好世界”应用示例，将这些概念串联起来，并给出了进一步学习的方向。

入门总是充满挑战，但也是最有趣的部分。通过不断实践和学习，你将能够利用 React Native 构建出强大且体验流畅的移动应用。

现在，最好的学习方式就是动手去写代码！回到你创建的项目，尝试修改代码，添加新的组件，玩转样式，犯错，然后解决问题。

祝你 React Native 学习旅途愉快！

---