教程：使用 React Native 和 Expo

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

我们即将开始一个构建通用应用的旅程。在本教程中，我们将创建一个可以在 Android、iOS 和网页上运行的 Expo 应用；所有这些都使用单一的代码库。让我们开始吧！

🌐 We're about to embark on a journey of building universal apps. In this tutorial, we'll create an Expo app that runs on Android, iOS, and web; all with a single codebase. Let's get started!

关于 React Native 和 Expo 教程

🌐 About React Native and Expo tutorial

本教程的目的是让你开始使用 Expo 并熟悉 Expo SDK。内容将涵盖以下主题：

🌐 The objective of this tutorial is to get started with Expo and become familiar with the Expo SDK. It'll cover the following topics:

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

这些主题为学习构建 Expo 应用的基础知识提供了基础。该教程可自行安排学习时间，完成可能需要最多两小时。

🌐 These topics provide a foundation to learn the fundamentals of building an Expo app. The tutorial is self-paced and can take up to two hours to complete.

为了保持初学者友好，我们将教程分成了九章，这样你可以跟着学习，也可以中途停下来以后再继续。每一章都包含完成步骤所需的代码片段，所以你可以选择从零创建应用来跟着操作，或者直接复制粘贴代码。

🌐 To keep it beginner friendly, we divided the tutorial into nine chapters so that you can follow along or put it down and come back to it later. Each chapter contains the necessary code snippets to complete the steps, so you can follow along by creating an app from scratch or copy and paste it.

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

🌐 Before we get started, take a look at what we'll build. It's an app named StickerSmash that runs on Android, iOS, and the web:

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

如何使用本教程

🌐 How to use this tutorial

我们相信通过实践学习，所以本教程强调实际操作而非讲解。你可以通过从零开始创建应用，一起跟随构建应用的过程。

🌐 We believe in learning by doing, so this tutorial emphasizes doing over explaining. You can follow along the journey of building an app by creating the app from scratch.

在整个教程中，任何重要的代码或在示例之间有所更改的代码都会 以绿色高亮。你可以将鼠标悬停在高亮部分（在桌面端）或点击它们（在移动端）以了解更多关于更改的信息。例如，下面代码片段中高亮显示的代码解释了它的作用：

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',
  },
});

下一步

🌐 Next step

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

🌐 We're ready to start building our app.