教程：介绍

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

我们即将踏上构建通用应用的旅程。在本教程中，我们将创建一个在 Android、iOS 和 Web 上运行的通用应用；全部都使用一个代码库。让我们开始吧！

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

关于本教程

¥About this 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:

• 创建一个 Expo 应用

  ¥Create an Expo App

• 分解应用布局并使用 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

这些主题将为学习构建移动应用的基础知识奠定良好的基础。该教程是自定进度的，可能需要两到三个小时才能完成。

¥These topics will provide a good foundation for learning the fundamentals of building a mobile app. The tutorial is self-paced and can take two to three hours to complete.

为了保持初学者友好，我们将本教程分为八章，以便你可以继续阅读或放下它并稍后再回来阅读。每章还包含所有必要的代码，以便你可以从头开始创建应用，或者在迷路时使用 Snack 示例复制和粘贴代码。

¥To keep it beginner friendly, we divided the tutorial into eight chapters so that you can follow along or put it down and come back to it later. Each chapter also contains all the necessary code so that you can follow along by creating an app from scratch or using Snack examples to copy and paste the code if you get lost.

在开始之前，先看看我们将构建什么。这是一个名为 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:

本教程的完整源代码可在 Snack 上找到。

如何使用本教程

¥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 the app by creating the app from scratch.

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

¥Throughout the tutorial, any important code or code that has changed between examples will be highlighted in yellow. You can hover over the highlights (on desktop) or tap them (on mobile) to see more context on 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 App() {
  return (
    <View style={styles.container}>
      <Text>Hello world!</Text>
    </View>
  );
}

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

等等，这个 "打开零食" 按钮是什么？

¥Wait, what is this "Open in Snack" button?

Snack 是一个基于网络的编辑器，其工作方式与 Expo 项目类似。这是共享代码片段和实验的好方法，无需在计算机上下载任何工具。

¥Snack is a web-based editor that works similarly to an Expo project. It's a great way to share code snippets and experiments without downloading any tools on your computer.

继续并按上面的按钮。你将看到上面的代码在 Snack 中运行。尝试在 Android、iOS 或 Web 选项卡之间切换。你还可以在设备上的 Expo Go 应用中从我的设备选项卡打开它。

¥Go ahead and press the above button. You will see the above code running in a Snack. Try to switch between Android, iOS or the web tabs. You can also open it on your device in the Expo Go app from the My device tab.

在本教程中，使用 Snack 将代码复制并粘贴到计算机上的项目中。我们将继续为每个模块提供 Snacks，但我们建议你在自己的计算机上创建应用，以体验构建应用的体验。

¥Throughout this tutorial, use Snack to copy and paste the code into your project on your computer. We will continue to provide Snacks for each module, but we recommend you create the app on your machine to go through the experience of building the app.

下一步

¥Next step