教程：使用 React Native 和 Expo

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

我们即将踏上构建通用应用的旅程。在本教程中，我们将创建一个在 Android、iOS 和 Web 上运行的 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 的默认模板创建应用

  ¥Create an app using the default template with TypeScript enabled

• 使用 Expo Router 实现双屏底部标签布局

  ¥Implement a two-screen bottom tabs layout with Expo Router

• 分解应用布局并使用 Flexbox 实现

  ¥Break down the app layout and implement it with flexbox

• 使用每个平台的系统 UI 从媒体库中选择图片

  ¥Use each platform's system UI to select an image from the media library

• 使用 React Native 中的 <Modal> 和 <FlatList> 组件创建贴纸模式

  ¥Create a sticker modal using the <Modal> and <FlatList> components from React Native

• 添加触摸手势以与贴纸交互

  ¥Add touch gestures to interact with a sticker

• 使用第三方库截屏并保存到磁盘

  ¥Use third-party libraries to capture a screenshot and save it to the disk

• 处理 Android、iOS 和 Web 之间的平台差异

  ¥Handle platform differences between Android, iOS, and web

• 最后，完成配置状态栏、启动画面和图标的过程以完成应用

  ¥Finally, go through the process of configuring a status bar, a splash screen, and an icon to complete the app

这些主题为学习构建 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 和 Web 上运行：

¥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.

在整个教程中，任何重要的代码或示例之间发生更改的代码都将是 highlighted in green。你可以将鼠标悬停在高亮部分上（在桌面上）或点击它们（在移动设备上）以了解有关更改的更多信息。例如，下面代码片段中高亮的代码解释了它的作用：

¥Throughout the tutorial, any important code or code that has changed between examples will be highlighted in green. You can hover over the highlights (on desktop) or tap them (on mobile) to learn more about the change. For example, the code highlighted in the snippet below explains what it does:

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.