教程：使用 React Native 和 Expo

使用 Expo 构建一个可在 Android、iOS 和 Web 上运行的通用应用的 React Native 教程介绍。

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

我们即将踏上一段构建通用应用的旅程。在本教程中，我们将创建一个可在 Android、iOS 和 web 上运行的 Expo 应用；所有功能都基于同一套代码库。让我们开始吧！

关于 React Native 和 Expo 教程

本教程的目标是让你快速上手 Expo，并熟悉 Expo SDK。它将涵盖以下主题：

• 使用启用 TypeScript 的默认模板创建应用
• 使用 Expo Router 实现一个双屏底部标签布局
• 拆解应用布局并使用 flexbox 实现它
• 使用各平台的系统 UI 从媒体库中选择图片
• 使用 React Native 的 <Modal> 和 <FlatList> 组件创建贴纸弹窗
• 添加触摸手势以与贴纸交互
• 使用第三方库捕获屏幕截图并将其保存到磁盘
• 处理 Android、iOS 和 web 之间的平台差异
• 最后，完成状态栏、启动画面和图标的配置以完善应用

这些主题为学习构建 Expo 应用的基础知识打下了坚实基础。本教程采用自定进度的方式，完成时间最多可达两小时。

为了让内容更适合初学者，我们将教程分成了九个章节，这样你可以按步骤跟着做，也可以先放下，之后再回来继续。每一章都包含完成步骤所需的代码片段，因此你既可以从零创建应用并跟着做，也可以直接复制粘贴。

在开始之前，先看看我们将要构建的内容。这是一个名为 StickerSmash 的应用，可在 Android、iOS 和 web 上运行：

本教程的完整源代码可在 GitHub 上获取。

如何使用本教程

我们相信 边做边学，因此本教程强调实践胜于讲解。你可以通过从零创建应用来跟随构建过程。

在整个教程中，任何重要的代码，或在不同示例之间发生变化的代码，都会以 绿色高亮显示。你可以将鼠标悬停在高亮内容上（桌面端）或点击它们（移动端）来了解更多关于这些改动的信息。例如，下面代码片段中的高亮内容解释了它的作用：

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

export default function Index() {
  return (
    <View style={styles.container}>
      <Text>Hello world!</Text>
    </View>
  );
}

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

下一步

我们已经准备好开始构建我们的应用了。