使用 Expo 开发网站

编辑页面

了解如何为 Web 开发你的应用，以便构建一个通用应用。

Expo 对使用 React 构建全栈网站提供一流支持。Expo 网站可以为了 SEO 和性能进行静态渲染，也可以进行客户端渲染，以在浏览器中获得更像应用的体验。

使用来自 React Native for web 的 <Text> 组件，可在任何平台上渲染文本。

app/index.js

import { Text } from 'react-native';

export default function Page() {
  return <Text>主页</Text>;
}

React Native for web（RNW）是一组组件库，例如 <View> 和 <Text>，它们封装了 react-dom 原语，例如 <div>、<p> 和 <img>。在为 web 开发时，RNW 是可选的，因为你可以直接使用 React DOM，但在跨平台构建时，我们通常推荐使用它，因为它能最大化代码复用。

React Native for web 被用来驱动整个 X 网站。

或者，你也可以编写仅适用于 web 的 React DOM 组件，例如 <div>、<p> 等，不过这些组件不会在原生平台上渲染。

app/index.js

export default function Page() {
  return <p>主页</p>;
}

Expo 完全支持构建仅限 web 的组件，不过你可能希望组织代码，以更好地同时支持 web 和原生平台的构建。了解更多，请参阅平台特定模块。

Expo SDK 中的所有库都设计为同时支持浏览器和服务器渲染环境（在适用时）。这些库也针对其所面向的各个平台进行了优化。

像 Fast Refresh、调试、环境变量以及打包等开发功能也都完全通用，从而提供统一的开发体验。Expo CLI 在你构建生产版本时会使用平台摇树优化等技术，自动优化代码以适配各个平台。

开始使用

安装 web 依赖

Terminal

- npx expo install react-dom react-native-web @expo/metro-runtime

还没有在你的应用中使用 expo 包？

如果你还没有为你的 React Native 应用添加 Expo，你可以安装 Expo 模块（推荐），或者只安装 expo 包并配置应用入口文件。这将使你能够面向 web，但不会包含对 Expo SDK 的支持。

在你的项目中安装 Expo CLI：

Terminal

- npm install expo

将入口文件修改为使用 registerRootComponent 而不是 AppRegistry.registerComponent：

index.js

启动开发服务器

现在你可以启动开发服务器，并在浏览器中使用以下命令进行开发：

Terminal

- npx expo start --web

应用可以通过以下命令导出为生产网站：

Terminal

- npx expo export --platform web

下一步

基于文件的路由

使用 Expo Router 构建路由和导航。

静态渲染与 SEO

使用 Expo Router 将你的网站渲染为静态 HTML，以提升 SEO 和性能。

使用 EAS Hosting 立即部署

EAS Hosting 是部署你的 Expo Router 和 React Native web 应用的最佳方式，支持自定义域名、SSL 等更多功能。

自定义 JavaScript 打包器

为你的项目自定义 Metro 打包器。

+import {AppRegistry} from 'react-native';
+import {name as appName} from './app.json';
+import {registerRootComponent} from 'expo';
 import App from './App';
+AppRegistry.registerComponent(appName, () => App);
+registerRootComponent(App);