创建你的第一个应用

初始化一个新的 Expo 应用

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

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

下载资产

下载归档后：

1. 解压归档并用新资产替换 your-project-name/assets/images 目录中的默认资产。
2. 在代码编辑器或 IDE 中打开项目目录。

运行 reset-project 脚本

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

运行上述命令后，app 目录中将只剩下两个文件（index.tsx 和 _layout.tsx）。脚本将 app 和其他目录（components、constants 和 hooks 中的样板代码）中的先前文件移动到名为 app-example 的子目录中。我们将随着进度创建自己的目录和组件文件。

在移动设备和网页上运行应用

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

运行上述命令后：

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

一旦在所有平台上运行，应用应如下所示：

编辑首页屏幕

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

应用于这些组件的样式使用 JavaScript 对象，而不是在网络上使用的 CSS。然而，如果你之前在网络上使用过 CSS，许多属性将是你所熟悉的。大多数 React Native 组件接受 style 属性，该属性将 JavaScript 对象作为其值。有关更多详细信息，请参见 React Native 中的样式。

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

1. 从 react-native 中导入 StyleSheet 并创建一个 styles 对象以定义我们的自定义样式。
2. 将 styles.container.backgroundColor 属性添加到 <View> 中，值为 #25292e。这会改变背景颜色。
3. 将 <Text> 的默认值替换为 "首页"。
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}>首页</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 中的颜色。

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