React Native与Expo入门实战指南

设计艾米 1
Viewed 0

React Native + Expo 入坑指南：从核心概念到实战演练

1. 初识 React Native 与 Expo

1.1. React Native 简介：跨平台开发的利刃

React Native 是由 Meta（原 Facebook）于 2015 年推出的开源框架，它允许开发者使用 JavaScript 和 React 来构建原生渲染的移动应用，同时支持 iOS 和 Android 两大平台。与传统的混合应用不同，React Native 并非在 WebView 中渲染 HTML，而是将 React 组件转换为对应平台的原生 UI 组件，因此其应用在外观、手感和性能上接近原生应用。

其核心架构基于 JavaScript 与原生代码的桥接。JavaScript 代码在后台线程执行，并通过“桥”与主 UI 线程通信，发送描述 UI 结构的 JSON 消息，由原生端据此创建或更新视图。这种机制让应用能充分利用原生渲染能力，并可通过 JavaScript 直接调用相机、地理位置等原生 API，实现了“一次编写，到处运行”的高效开发模式。

1.2. Expo 简介：为 React Native 插上翅膀

Expo 是一个基于 React Native 的开源框架和平台，旨在简化和加速开发、构建、部署的全流程。你可以将其视为 React Native 的一个“超集”或“工具箱”，它提供了一整套工具、服务和预配置的库。

Expo 的核心组成部分包括：

  • Expo CLI：命令行工具，用于创建项目、启动服务器、打包发布等。
  • Expo Go：手机客户端应用，可通过扫描二维码在真机上实时预览和调试应用，无需连接数据线。
  • Expo SDK：丰富的 JavaScript API 库，封装了相机、相册、地理位置、推送通知等常用原生功能，方便直接调用。
  • Expo Application Services (EAS)：云端服务，用于处理应用的构建、签名和发布，简化了上架流程。

通过 Expo，开发者可以避开直接处理 Xcode 和 Android Studio 的复杂性，尤其其“托管工作流”模式，让开发移动应用变得像开发 Web 应用一样简单。

1.3. 为什么选择 Expo？

选择 Expo 主要基于其在开发全生命周期中带来的显著优势，尤其适合初学者和追求效率的团队。

快速开发与热重载：Expo 通过“托管工作流”抽象了复杂的原生环境配置。开发者只需安装 Node.js 和 Expo CLI 即可快速创建项目，跳过了繁琐的环境搭建。配合强大的热重载和实时重载功能，代码保存后应用界面几乎即刻更新，再通过 Expo Go 在真机上实时预览，实现了高效的“所见即所得”开发体验。

丰富的内置 API 与组件：Expo SDK 提供了覆盖绝大部分常见需求的 API，如设备访问（相机、传感器）、位置服务、网络数据等。开发者无需编写原生代码，通过简单的 JavaScript 调用即可实现复杂功能，且保证了跨平台一致性，让开发者能更专注于业务逻辑。

简化的构建与发布流程：传统打包过程复杂且易出错。Expo 的 EAS 服务将构建、签名和打包过程自动化、云端化。开发者只需在配置文件中设置好应用信息，运行 eas build 命令即可在云端完成构建，并可借助 EAS Submit 一键提交到应用商店，极大地节省了时间和精力。

2. 开发环境搭建

2.1. 准备工作：安装 Node.js 与 npm

首先需要安装 Node.js 环境，这是运行 Expo CLI 和管理项目依赖的基础。建议访问 Node.js 官网下载并安装 LTS（长期支持）版本，安装时会自动包含 npm 包管理器。安装完成后，在终端运行 node -v 和 npm -v 来验证安装。

2.2. 安装 Expo CLI：你的开发指挥中心

Expo CLI 是核心的开发工具，用于项目创建、管理和构建。通过以下命令全局安装：

npm install -g expo-cli

安装后，运行 expo --version 确认安装成功。

2.3. 安装 Expo Go：手机上的实时预览器

在手机的 App Store (iOS) 或 Google Play Store (Android) 中搜索并安装 “Expo Go” 应用。开发时，在电脑上启动项目后，用手机 Expo Go 扫描终端或网页中显示的二维码，即可在真机上实时运行和调试应用，支持热重载，无需反复编译安装。

2.4. 配置开发工具：VS Code 推荐插件

推荐使用 Visual Studio Code 并安装以下插件提升开发体验：

  • ES7+ React/Redux/React-Native snippets：快速生成代码片段。
  • Prettier - Code formatter：自动统一代码风格。
  • ESLint：代码检查，提升质量。
  • Path Intellisense：自动补全文件路径。
  • Auto Rename Tag：自动配对修改 JSX 标签。

3. 创建你的第一个应用

3.1. 使用 expo init 初始化项目

打开终端，进入目标目录，运行：

expo init MyFirstApp

将 MyFirstApp 替换为你的项目名。之后会提示选择模板，初学者推荐 blank（最简示例）或 blank (TypeScript)（集成 TypeScript 支持）。

3.2. 项目结构解析

创建成功后，进入项目目录 cd MyFirstApp，你会看到以下关键文件：

  • App.js：应用入口文件，定义了根组件。
  • app.json / app.config.js：Expo 项目配置文件，用于设置应用名称、图标等信息。
  • package.json：项目描述文件和依赖管理。
  • assets/：推荐存放图片、字体等静态资源。

随着项目扩大，可以创建 components/、 screens/ 等文件夹来组织代码。

3.3. 启动开发服务器： expo start

在项目根目录运行：

expo start
# 或
npm start

这将启动 Metro 打包器和本地开发服务器，并自动在浏览器打开 Expo 开发者工具界面。

3.4. 在 Expo Go 中查看应用

确保手机与电脑在同一 Wi-Fi 下。打开手机上的 Expo Go，扫描开发者工具界面中显示的二维码。稍等片刻，应用就会在手机上运行。此时，尝试修改 App.js 中的代码并保存，手机上的应用会立即更新，体验热重载的便利。

4. 核心概念与基本用法

4.1. 组件系统：构建 UI 的基石

React Native 采用组件化开发，提供了一系列映射到原生视图的核心组件：

  • View：最基础的容器组件，类似于 Web 中的 <div>，用于布局和样式，支持 Flexbox。
  • Text：用于显示文本，所有文本都必须包裹在此组件内。
  • Image：用于显示图片，支持网络和本地资源。
  • Button：提供基础跨平台按钮。如需更复杂样式，可使用 TouchableOpacity 等。

样式通过 StyleSheet.create() 创建的 JavaScript 对象定义。布局主要依靠 Flexbox 模型，通过 flexDirection、 justifyContent、 alignItems 和 flex 等属性实现灵活适配。

创建可复用的自定义组件是构建应用的基础，它接收 props 并返回 React 元素。

4.2. 状态管理：让应用“动”起来

状态（State）决定了组件的行为和外观，状态变化会触发重新渲染。

使用 useState 管理组件内部状态：这是一个 React Hook，用于在函数组件中添加状态。

import React, { useState } from 'react';
const [count, setCount] = useState(0); // 声明状态和更新函数

使用 useEffect 处理副作用：用于执行数据获取、订阅等不直接参与渲染的操作。可以通过依赖数组控制执行时机。

useEffect(() => {
  fetchData();
}, []); // 空数组表示仅在组件挂载时执行一次

跨组件状态共享：Context API：当需要在多个组件间共享状态时，使用 Context 可以避免“属性逐层传递”。

// 创建 Context
const MyContext = React.createContext();
// 提供值
<MyContext.Provider value={someValue}>...</MyContext.Provider>
// 消费值
const value = useContext(MyContext);

4.3. 导航与路由：实现多页面应用

React Navigation 是社区最流行的导航库。

安装与配置：

expo install @react-navigation/native react-native-screens react-native-safe-area-context

还需要根据导航器类型安装特定库，如栈导航器：npm install @react-navigation/native-stack。最后用 NavigationContainer 包裹应用。

栈导航 (Stack Navigator)：模拟原生页面切换，新屏幕滑入，返回时退出。

import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>

标签导航 (Tab Navigator)：常用于主界面，底部或顶部显示固定标签。

expo install @react-navigation/bottom-tabs

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

抽屉导航 (Drawer Navigator)：提供从屏幕边缘滑出的侧边菜单。

expo install @react-navigation/drawer

import { createDrawerNavigator } from '@react-navigation/drawer';

4.4. 调用原生功能：Expo SDK 的应用

Expo SDK 提供了大量跨平台 API，简化了原生功能调用。

访问设备相机与相册：使用 expo-image-picker。

expo install expo-image-picker

import * as ImagePicker from 'expo-image-picker';
// 请求权限后
let result = await ImagePicker.launchCameraAsync();

获取地理位置信息：使用 expo-location。

expo install expo-location

import * as Location from 'expo-location';
let location = await Location.getCurrentPositionAsync({});

使用设备传感器：使用 expo-sensors。

expo install expo-sensors

import { Accelerometer } from 'expo-sensors';
Accelerometer.addListener(data => { /* 处理数据 */ });

网络请求与数据交互：可使用标准的 fetch API 或 axios 库。

4.5. 处理平台差异

尽管追求“一次编写，到处运行”，但有时需要针对不同平台优化。

使用 Platform API 检测平台：

import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: { backgroundColor: 'red' },
      android: { backgroundColor: 'blue' },
    }),
  },
});

编写平台特定代码：可以创建 MyComponent.ios.js 和 MyComponent.android.js 文件，React Native 会根据构建平台自动加载对应文件。

5. 实战演练：构建一个图片分享应用

我们将构建一个名为 “StickerSmash” 的应用，允许用户选择图片、添加可操作的贴纸，并保存分享。

项目功能规划：

  1. 从相册选择图片作为底图。
  2. 从贴纸库选择贴纸。
  3. 可拖动、缩放、旋转贴纸。
  4. 采用底部标签导航，主要包含图片编辑页和贴纸选择页。
  5. 保存最终图片到相册。

技术选型：React Navigation 管理导航，React Hooks 和 Context 管理状态，expo-image-picker 选择图片，react-native-gesture-handler 和 react-native-reanimated 处理手势，react-native-view-shot 进行截图。

5.1. 搭建应用框架与导航结构

目录结构建议：

StickerSmash/
├── App.js
├── contexts/
│   └── ImageContext.js
└── screens/
    ├── HomeScreen.js
    └── StickersScreen.js

导航配置 (App.js)：使用 BottomTabNavigator 和嵌套的 StackNavigator，并用 ImageProvider Context 包裹应用以共享状态。

5.2. 实现图片选择与展示功能

安装依赖：expo install expo-image-picker。
在 HomeScreen 中，使用 ImagePicker.launchImageLibraryAsync 打开相册，并将选中图片的 URI 存入 ImageContext 状态中显示。

5.3. 添加用户交互与状态管理

安装手势库：expo install react-native-gesture-handler react-native-reanimated。

创建 ImageContext 来管理选中的图片和贴纸列表状态，提供添加和更新贴纸的函数。

创建 EmojiSticker 组件，利用 PanGestureHandler, PinchGestureHandler, RotationGestureHandler 配合 react-native-reanimated 实现贴纸的拖动、缩放和旋转动画，并将最终状态同步回 Context。

5.4. 美化 UI 与实现保存功能

在 app.json 中配置应用图标、启动画面等资源。

实现保存功能：使用 react-native-view-shot 的 captureRef 对包含图片和贴纸的视图进行截图，然后使用 expo-media-library 的 saveToLibraryAsync 将图片保存到相册。

6. 打包与发布

6.1. 配置应用图标与启动画面

在 app.json 中配置 icon（应用图标）、splash（启动画面）和 adaptiveIcon（Android 自适应图标）的路径，将设计好的图片放入 assets 文件夹。

6.2. 使用 EAS Build 进行云端构建

安装 EAS CLI：npm install -g eas-cli。
登录并配置项目后，运行构建命令：

eas build --platform android
eas build --platform ios

EAS 会在云端完成所有原生编译和打包工作，生成可安装的应用包。

6.3. 发布到应用商店 (App Store & Google Play)

使用 EAS Submit 服务简化提交流程：

eas submit --platform android
eas submit --platform ios

按照提示操作，EAS 会引导你完成向 Apple App Store 和 Google Play Store 的提交过程。

7. 常见问题与进阶学习资源

7.1. 常见错误排查

  • Metro Bundler 无法启动/连接失败：检查防火墙，确保端口开放，尝试重启服务器或切换网络。
  • Expo Go 无法扫描二维码：确保手机电脑在同一网络，尝试使用开发者工具中的 “Tunnel” 模式。
  • “Unable to resolve module” 错误：检查导入路径是否正确，模块是否已安装。
  • 样式不生效：检查样式属性是否使用驼峰命名（如 backgroundColor），并确保正确传递给组件。

7.2. 性能优化技巧

  • 使用 FlatList 渲染长列表：只渲染可见项，大幅提升性能。
  • 避免在 render 中创建函数/对象：使用 useCallback 和 useMemo 来缓存。
  • 优化图片：使用合适尺寸，对于网络图片可考虑使用 expo-image 以获得更好缓存。
  • 使用 React.memo：对于不依赖父组件状态的子组件，使用 React.memo 避免不必要的重渲染。

7.3. 推荐学习资源

  • 官方文档：Expo 官方文档 和 React Native 官方文档是最权威的学习资源。
  • 社区与论坛：Expo 社区论坛 和 Stack Overflow 是提问和交流的好地方。
  • 视频教程与博客：关注 YouTube 上的优质教程频道和技术博客，以获取最新动态和最佳实践。
react-native
0 Answers
Related
React Navigation 在 React Native 中实现导航与跳转
React Native 中 React Navigation 导航器使用详解
React Native导航配置指南：使用React Navigation详解
React Native使用React Navigation进行页面跳转
React Navigation 5.x迁移指南：从4.x升级到新版本
React Native React Navigation 导航使用完全指南