创建你的第一个应用

初始化一个新的 Expo 应用

我们将使用 create-expo-app 来初始化一个新的 Expo 应用。它是一个用于创建新的 React Native 项目的命令行工具。在你的终端中运行以下命令：

此命令将使用 默认 模板创建一个名为 StickerSmash 的新项目目录。该模板包含构建应用所需的基础样板代码和库，包括 Expo Router。接下来在本教程中，我们会根据需要继续添加更多库。

create-expo-app@latest 当前会创建一个 SDK 54 项目。本教程是为 SDK 54 设计的，因此不需要 --template 标志。

下载资源

下载压缩包后：

1. 解压压缩包，并替换 your-project-name/assets/images 目录中的默认资源。
2. 在代码编辑器或 IDE 中打开项目目录。

运行 reset-project 脚本

在本教程中，我们将从头构建应用，并理解添加基于文件的导航的基础知识。让我们运行 reset-project 脚本来移除样板代码：

运行上面的命令后，app 目录中只剩下两个文件（index.tsx 和 _layout.tsx）。脚本会将之前位于 app 和其他目录（components、constants 和 hooks — 包含样板代码）的文件移动到 app-example 目录中。我们会在后续过程中创建自己的目录和组件文件。

在移动设备和 web 上运行应用

在项目目录中，从终端运行以下命令以启动 开发服务器：

运行上面的命令后：

1. 开发服务器将启动，你会在终端窗口中看到一个二维码。
2. 扫描该二维码以在设备上打开应用。在 Android 上，使用 Expo Go > 扫描二维码 选项。在 iOS 上，使用默认相机应用。
3. 要运行 web 应用，在终端中按 w。它会在默认网页浏览器中打开 web 应用。

当它在所有平台上都运行起来后，应用应该看起来像这样：

编辑 index 屏幕

app/index.tsx 文件定义了应用屏幕上显示的文本。它是我们应用的入口点，并会在开发服务器启动时执行。它使用 React Native 的核心组件，例如 <View> 和 <Text>，来显示背景和文本。

应用于这些组件的样式使用 JavaScript 对象，而不是 web 上使用的 CSS。不过，如果你以前在 web 上使用过 CSS，其中很多属性会让你觉得熟悉。大多数 React Native 组件都接受一个 style 属性，其值是一个 JavaScript 对象。更多细节请参阅 React Native 中的样式。

让我们修改 app/index.tsx 屏幕：

1. 从 react-native 导入 StyleSheet，并创建一个 styles 对象来定义我们的自定义样式。
2. 为 <View> 添加一个 styles.container.backgroundColor 属性，值为 #25292e。这会改变背景颜色。
3. 将 <Text> 的默认值替换为 "Home screen"。
4. 为 <Text> 添加一个 styles.text.color 属性，值为 #fff（白色），以更改文本颜色。

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

export default function Index() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Home screen</Text>
    </View>
  );
}

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

React Native 使用与 web 相同的颜色格式。它支持十六进制三元组（这就是 #fff 的形式）、rgba、hsl，以及命名颜色，例如 red、green、blue、peru 和 papayawhip。更多信息请参阅 React Native 中的颜色。

当你保存更改后，它们会被发送并应用到连接到开发服务器的正在运行的应用中：