开始开发
对 Expo 项目进行第一次更改并在你的设备上实时查看。
1
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.
如果你使用的是安卓模拟器或 iOS 模拟器，你可以分别按 a 或 i 来打开应用。
遇到问题了吗？
确保你的电脑和设备连接在同一个 Wi-Fi 网络上。
🌐 Make sure you are on the same Wi-Fi network on your computer and your device.
如果仍然不起作用，可能是由于路由配置问题——在公共网络中这种情况很常见。你可以通过在启动开发服务器时选择 Tunnel 连接类型来解决此问题，然后再次扫描二维码。
🌐 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.
- npx expo start --tunnel使用 Tunnel（隧道） 连接类型会使应用的重载速度明显比 LAN（局域网） 或 Local（本地） 慢，因此最好在可能的情况下避免使用隧道。如果需要通过 Tunnel 从网络上的其他设备访问你的计算机，你可能需要安装并使用模拟器或模拟设备来加快开发速度。
3
进行你的第一次更改
🌐 Make your first change
在你的代码编辑器中打开 app/(tabs)/index.tsx 文件并进行修改。
🌐 Open the app/(tabs)/index.tsx file in your code editor and make a change.
| 17 | 17 | } |
| 18 | 18 | > |
| 19 | 19 | <ThemedView style={styles.titleContainer}> |
| 20 | <ThemedText type="title">Welcome!</ThemedText> | |
| 20 | <ThemedText type="title">Hello World!</ThemedText> | |
| 21 | 21 | <HelloWave /> |
| 22 | 22 | </ThemedView> |
| 23 | 23 | <ThemedView style={styles.stepContainer}> |
| 24 | 24 |
更改没有在你的设备上显示吗？
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 中启用了开发模式。
-
关闭 Expo 应用并重新打开。
-
一旦应用再次打开，摇动设备即可显示开发者菜单。如果你使用的是模拟器，Android请按 Ctrl + M ，iOS请按 Cmd ⌘ + D 。
-
如果你看到 启用快速刷新，点击它。如果你看到 禁用快速刷新，关闭开发者菜单。现在尝试再次进行更改。
文件结构
🌐 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.
该应用有两个路由，由两个文件定义：app/(tabs)/index.tsx 和 app/(tabs)/explore.tsx。app/(tabs)/_layout.tsx 中的布局文件设置了标签导航器。
🌐 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
基于文件的路由
该应用有两个屏幕：app/(tabs)/index.tsx 和 app/(tabs)/explore.tsx。app/(tabs)/_layout.tsx 中的布局文件设置了标签导航器。
🌐 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