教程：使用 React Native 和 Expo

这是一个关于如何使用 Expo 构建适用于 Android、iOS 和 web 的通用应用程序的 React Native 教程介绍。

我们即将开始构建通用应用程序的旅程。在本教程中，我们将创建一个在 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',
  },
});

下一步

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