首页指南参考教程

开始开发

对 Expo 项目进行第一次更改并在你的设备上实时查看。


1

启动开发服务器

¥Start a development server

要启动开发服务器,请运行以下命令:

¥To start the development server, run the following command:

Terminal
npx expo start

2

打开你设备上的应用

¥Open the app on your device

运行上述命令后,你将在终端中看到二维码。扫描此二维码以在你的设备上打开应用。

¥After running the command above, you will see a QR code in your terminal. Scan this QR code to open the app on your device.

如果你使用的是 Android 模拟器或 iOS 模拟器,你可以分别按 ai 打开应用。

¥If you're using an Android Emulator or iOS Simulator, you can press a or i respectively to open the app.

Having problems?

确保你的计算机和设备上的 Wi-Fi 网络相同。

¥Make sure you are on the same Wi-Fi network on your computer and your device.

如果仍然不起作用,则可能是由于路由配置所致 - 这对于公共网络来说很常见。你可以通过在启动开发服务器时选择隧道连接类型,然后再次扫描二维码来解决此问题。

¥If it still doesn't work, it may be due to the router configuration — this is common for public networks. You can work around this by choosing the Tunnel connection type when starting the development server, then scanning the QR code again.

Terminal
npx expo start --tunnel

Using the 隧道 连接类型将使应用的重新加载速度比 LAN 或本地连接慢得多,因此最好尽可能避免使用隧道。如果需要 Tunnel 从网络上的另一台设备访问你的机器,你可能需要安装并使用模拟器或模拟器来加快开发速度。

¥connection type will make the app reloads considerably slower than on LAN or Local, so it's best to avoid tunnel when possible. You may want to install and use an emulator or simulator to speed up development if Tunnel is required to access your machine from another device on your network.

3

进行第一次更改

¥Make your first change

在代码编辑器中打开 app/(tabs)/index.tsx 文件并进行更改。

¥Open the app/(tabs)/index.tsx file in your code editor and make a change.

app/(tabs)/index.tsx
1717 }
1818 >
1919 <ThemedView style={styles.titleContainer}>
20 <ThemedText type="title">Welcome!</ThemedText>
20 <ThemedText type="title">Hello World!</ThemedText>
2121 <HelloWave />
2222 </ThemedView>
2323 <ThemedView style={styles.stepContainer}>
2424
Changes not showing up on your device?

默认情况下,Expo Go 配置为在文件发生更改时自动重新加载应用,但让我们确保完成以下步骤以启用它,以防万一出现问题。

¥Expo Go is configured by default to automatically reload the app whenever a file is changed, but let's make sure to go over the steps to enable it in case somehow things aren't working.

  • 确保你拥有 在 Expo CLI 中启用开发模式

    ¥Make sure you have the development mode enabled in Expo CLI.

  • 关闭 Expo 应用并重新打开它。

    ¥Close the Expo app and reopen it.

  • 再次打开应用后,摇动你的设备以显示开发者菜单。如果你使用模拟器,请按 Ctrl + M(适用于 Android)或 Cmd ⌘ + D(适用于 iOS)。

    ¥Once the app is open again, shake your device to reveal the developer menu. If you are using an emulator, press Ctrl + M for Android or Cmd ⌘ + D for iOS.

  • 如果你看到启用快速刷新,请按它。如果你看到“禁用快速刷新”,请关闭开发者菜单。现在尝试进行另一个改变。

    ¥If you see Enable Fast Refresh, press it. If you see Disable Fast Refresh, dismiss the developer menu. Now try making another change.


文件结构

¥File structure

下面,你可以熟悉默认项目的文件结构:

¥Below, you can get familiar with the default project's file structure:

Files

app

Contains the app's navigation, which is file-based. The file structure of the app directory determines the app's navigation.

The app has two routes defined by two files: app/(tabs)/index.tsx and app/(tabs)/explore.tsx. The layout file in app/(tabs)/_layout.tsx sets up the tab navigator.

特性

¥Features

默认项目模板具有以下功能:

¥The default project template has the following features:

Default project

Two tabs in an Expo app

File-based routing

The app has two screens: app/(tabs)/index.tsx and app/(tabs)/explore.tsx. The layout file in app/(tabs)/_layout.tsx sets up the tab navigator.

Learn More