运行第一个项目（Hello World）

Windows 系统环境搭建第四步

现在我们已经安装了所有必要的工具和依赖，接下来让我们创建并运行第一个 React Native 项目，实现 Hello World 应用。

1. 使用 Expo CLI 创建项目

步骤

打开命令提示符（CMD）或 PowerShell
- 导航到你想要创建项目的目录
创建 Expo 项目
- 运行以下命令：
  bash
```
npx create-expo-app MyFirstApp
```
- 这将创建一个名为 MyFirstApp 的 Expo 项目
进入项目目录
- 运行以下命令：
  bash
```
cd MyFirstApp
```

2. 运行项目

在模拟器中运行

启动模拟器
- 打开 Android Studio
- 启动 AVD Manager
- 运行你之前创建的虚拟设备
运行 Expo 项目
- 在项目目录中，运行以下命令：
  bash
```
npx expo start
```
- 这将启动 Expo 开发服务器
在模拟器中打开应用
- 在 Expo 开发服务器的输出中，按 a 键
- 这将在 Android 模拟器中打开应用

在真机中运行

安装 Expo Go 应用
- 在你的 Android 或 iOS 设备上，从应用商店下载并安装 Expo Go 应用
运行 Expo 项目
- 在项目目录中，运行以下命令：
  bash
```
npx expo start
```
扫描二维码
- 打开 Expo Go 应用
- 扫描终端中显示的二维码
- 应用将在你的真机上打开

3. 查看和修改代码

查看项目结构

项目文件结构
- App.js：应用的主入口文件
- package.json：项目配置和依赖
- app.json：Expo 项目配置
- assets/：存放图片等静态资源

修改代码

打开 App.js 文件
- 使用 Visual Studio Code 或其他编辑器打开 App.js

修改代码

将默认代码替换为以下内容：

javascript

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
      <Text>Welcome to React Native!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

保存文件
- 保存 App.js 文件
- 查看模拟器或真机上的应用，你会看到代码已经自动更新

4. 常见问题解决

项目启动问题

问题：Expo 开发服务器无法启动解决：检查端口是否被占用，尝试使用 npx expo start --port 8081 指定端口
问题：模拟器无法连接到开发服务器解决：确保模拟器和开发服务器在同一网络下，尝试重启模拟器

代码更新问题

问题：修改代码后应用没有更新解决：尝试按 r 键重新加载应用，或按 d 键打开调试菜单并选择 "Reload"

依赖问题

问题：运行项目时出现依赖错误解决：运行 npx expo install --fix 修复依赖

5. 总结

恭喜你！你已经成功创建并运行了你的第一个 React Native 项目。通过这个 Hello World 应用，你已经了解了如何：

使用 Expo CLI 创建 React Native 项目
在模拟器和真机上运行项目
修改代码并查看实时更新

这是你 React Native 学习之旅的第一步。在接下来的教程中，我们将学习更多 React Native 的核心概念和功能。

如果你使用的是 Mac 系统，下一节我们将介绍 Mac 系统的环境搭建步骤。

运行第一个项目（Hello World） ​

Windows 系统环境搭建第四步 ​

1. 使用 Expo CLI 创建项目 ​

步骤 ​

2. 运行项目 ​

在模拟器中运行 ​

在真机中运行 ​

3. 查看和修改代码 ​

查看项目结构 ​

修改代码 ​

4. 常见问题解决 ​

项目启动问题 ​

代码更新问题 ​

依赖问题 ​

5. 总结 ​