创建你的第一个应用

初始化一个新的 Expo 应用

🌐 Initialize a new Expo app

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

🌐 We'll use create-expo-app to initialize a new Expo app. It is a command-line tool to create a new React Native project. Run the following command in your terminal:

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

🌐 This command will create a new project directory named StickerSmash, using the default template. This template has essential boilerplate code and libraries needed to build our app, including Expo Router and allows us to test our app with Expo Go installed on our devices. We'll continue to add more libraries throughout this tutorial as needed.

下载资源

🌐 Download assets

下载压缩包后：

🌐 After downloading the archive:

1. 解压存档，并替换 your-project-name/assets/images 目录中的默认资源。
2. 在代码编辑器或集成开发环境中打开项目目录。

运行 reset-project 脚本

🌐 Run reset-project script

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

🌐 In this tutorial, we'll build our app from scratch and understand the fundamentals of adding a file-based navigation. Let's run the reset-project script to remove the boilerplate code:

运行上述命令后，src/app 目录里会剩下两个文件（index.tsx 和 _layout.tsx）。之前 src 目录下的文件（包括 components、constants 和 hooks）会被脚本移动到 example 目录里。我们会在后续根据需要创建自己的目录和组件文件。

🌐 After running the above command, there are two files (index.tsx and _layout.tsx) left inside the src/app directory. The previous files from the src directory (including components, constants, and hooks) are moved inside the example directory by the script. We'll create our own directories and component files as we go along.

在移动端和网页上运行该应用

🌐 Run the app on mobile and web

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

🌐 In the project directory, run the following command to start the development server from the terminal:

运行上述命令后：

🌐 After running the above command:

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

信息 在真实的 iOS 设备上，Expo Go 只有在 Expo CLI 和 Expo Go 登录同一个 Expo 账号时才会打开你的项目。在你的电脑上运行 npx expo login，然后用同一个账号登录 Expo Go。如果错误依然存在，请查看 需要登录 Expo Go。

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

🌐 Once it is running on all platforms, the app should look like this:

编辑索引界面

🌐 Edit the index screen

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

🌐 The src/app/index.tsx file defines the text displayed on the app's screen. It is the entry point of our app and executes when the development server starts. It uses core React Native components such as <View> and <Text> to display background and text.

应用于这些组件的样式使用的是 JavaScript 对象，而不是 Web 上使用的 CSS。不过，如果你之前在网页上使用过 CSS，许多属性看起来会很熟悉。大多数 React Native 组件接受一个 style 属性，其值是一个 JavaScript 对象。更多详情请参见 React Native 中的样式。

🌐 Styles applied to these components use JavaScript objects rather than CSS, which is used on web. However, a lot of the properties will look familiar if you've previously used CSS on web. Most React Native components accept a style prop that accepts a JavaScript object as its value. For more details, see Styling in React Native.

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

🌐 Let's modify src/app/index.tsx screen:

1. 从 react-native 导入 StyleSheet 并创建一个 styles 对象来定义我们的自定义样式。
2. 向 <View> 添加一个 styles.container.backgroundColor 属性，值为 #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}>Home screen</Text>
    </View>
  );
}

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

React Native 使用与网页相同的颜色格式。它支持十六进制三位数（这就是 #fff）、rgba、hsl 和命名颜色，如 red、green、blue、peru 和 papayawhip。欲了解更多信息，请参阅 React Native 中的颜色。

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

🌐 Once you save your changes, they're sent and applied to the running apps connected to the development server: