如何在手机上预览React应用程序？

要在手机移动端预览 React 应用，您可以遵循以下步骤：

1. 在开发机器上启动 React 应用

首先，在您的开发机器上启动您的 React 应用。通常执行 npm start 或 yarn start 命令可以启动应用，并且会在默认情况下在本地 localhost:3000 开启一个开发服务器。

2. 确保手机和开发机器在同一网络下

您的手机和开发机器需要处在同一局域网内，这样手机才能通过网络访问到开发机器上的服务。

3. 获取开发机器的 IP 地址

在您的开发机器上找到它的局域网 IP 地址。在 Windows 上可以在命令提示符中运行 ipconfig，在 macOS 或 Linux 上可以在终端中运行 ifconfig 或 ip a。

4. 在手机浏览器中输入开发机器的IP地址和端口号

在您的手机浏览器中输入开发机器的 IP 地址和 React 应用运行时的端口号。例如，如果您的IP地址是 192.168.1.5 并且 React 应用在端口 3000 上运行，您应该输入 http://192.168.1.5:3000。

5. 解决可能的访问问题

• 如果您的防火墙设置阻止了外部设备的访问，您可能需要修改设置以允许访问。
• 确保您的开发服务器配置为在局域网内监听，而不是仅仅在 localhost。

6. 使用 React Native 的情况（如适用）

如果您正在使用 React Native 开发移动应用，您可以使用 Expo 或 React Native CLI 来预览应用。Expo 提供了一个扫描二维码的功能，允许您通过 Expo 客户端应用直接在手机上预览您的 React Native 应用。

示例：

假设我开发的是一个天气应用，并且我想在我的 iPhone 上预览这个 React 应用。我将遵循以下步骤：

1. 我在我的 MacBook 上运行了 npm start，应用在 localhost:3000 成功启动。
2. 我确保我的 MacBook 和 iPhone 连接到同一个 Wi-Fi 网络。
3. 我在 MacBook 上打开终端，运行 ifconfig，找到我的 IP 地址，例如 192.168.1.5。
4. 我在 iPhone 的 Safari 浏览器中输入 http://192.168.1.5:3000。
5. 我检查 Mac 的系统偏好设置，确保防火墙允许入站连接。
6. 我看到我的天气应用在 iPhone 上成功加载，并且可以像在桌面浏览器中一样与之交互。

通过这种方式，我可以在真实的移动设备上测试和预览我的 React 应用，这对于检查响应式设计和移动设备的交互性能非常有帮助。