创建你的第一个应用

初始化一个新的 Expo 应用

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

此命令将使用默认模板创建一个名为 StickerSmash 的新项目目录。该模板包含构建应用所需的基本样板代码和库，包括 Expo Router，并支持使用设备上安装的 Expo Go 测试应用。在本教程中，我们会根据需要继续添加更多库。

下载资源

下载压缩包后：

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

运行 reset-project 脚本

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

运行上述命令后，src/app 目录中会留下两个文件（index.tsx 和 _layout.tsx）。脚本会将 src 目录中的原有文件（包括 components、constants 和 hooks）移至 example 目录。接下来，我们会创建自己的目录和组件文件。

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

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

运行上面的命令后：

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

在实体 iOS 设备上，只有当 Expo CLI 和 Expo Go 登录的是同一个 Expo 账户时，Expo Go 才会打开你的项目。在电脑上运行 npx expo login，然后使用同一个账户登录 Expo Go。如果错误仍然存在，请参阅 需要登录 Expo Go。

应用在所有平台上运行后，应该如下所示：

编辑 index 屏幕

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

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

让我们修改 src/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 中的颜色。

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