创建你的第一个应用

初始化一个新的 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:

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

¥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. We'll continue to add more libraries throughout this tutorial as needed.

下载资源

¥Download assets

下载存档后：

¥After downloading the archive:

1. 解压缩存档并替换 your-project-name/assets/images 目录中的默认资源。

   ¥Unzip the archive and replace the default assets in the your-project-name/assets/images directory.

2. 在代码编辑器或 IDE 中打开项目目录。

   ¥Open the project directory in a code editor or IDE.

运行时版本配置

¥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:

运行上述命令后，应用目录中剩下两个文件（index.tsx 和 _layout.tsx）。脚本将 app 和其他目录中的先前文件（组件、常量和钩子 - 包含样板代码）移动到 app-example 目录中。我们将在进行过程中创建自己的目录和组件文件。

¥After running the above command, there are two files (index.tsx and _layout.tsx) left inside the app directory. The previous files from app and other directories (components, constants, and hooks — containing boilerplate code) are moved inside the app-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. 开发服务器将启动，你将在终端窗口内看到一个二维码。

   ¥The development server will start, and you'll see a QR code inside the terminal window.

2. 扫描该二维码以在设备上打开应用。在 Android 上，使用 Expo Go > 扫描二维码选项。在 iOS 上，使用默认相机应用。

   ¥Scan that QR code to open the app on the device. On Android, use the Expo Go > Scan QR code option. On iOS, use the default camera app.

3. 要运行 Web 应用，请在终端中按 w。它将在默认网络浏览器中打开网络应用。

   ¥To run the web app, press w in the terminal. It will open the web app in the default web browser.

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

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

编辑索引屏幕

¥Edit the index screen

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

¥The 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。但是，如果你以前在 Web 上使用过 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.

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

¥Let's modify app/index.tsx screen:

1. 从 react-native 导入 StyleSheet 并创建 styles 对象来定义我们的自定义样式。

   ¥Import StyleSheet from react-native and create a styles object to define our custom styles.

2. 将 styles.container.backgroundColor 属性添加到 <View>，其值为 #25292e。这会更改背景颜色。

   ¥Add a styles.container.backgroundColor property to <View> with the value of #25292e. This changes the background color.

3. 用 "主屏幕" 替换 <Text> 的默认值。

   ¥Replace the default value of <Text> with "Home screen".

4. 将 styles.text.color 属性添加到 <Text>，其值为 #fff（白色），以更改文本颜色。

   ¥Add a styles.text.color property to <Text> with the value of #fff (white) to change the text color.

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 中的颜色。

¥React Native uses the same color format as the web. It supports hex triplets (this is what #fff is), rgba, hsl, and named colors, such as red, green, blue, peru, and papayawhip. For more information, see Colors in React Native.

此更改将自动反映在所有平台上：

¥This change will reflect on all platforms automatically: