使用 Expo 开发网站

编辑

学习如何为网络开发您的应用程序，以便构建通用应用程序。

Expo 在使用 React 构建全栈网站方面提供了卓越的支持。Expo 网站可以进行静态渲染，以便提高 SEO 和性能，或者进行客户端渲染，以便在浏览器中获得更类似应用程序的体验。

使用来自 React Native for web 的 <Text> 组件在任何平台上呈现文本。

app/index.js

import { Text } from 'react-native';

export default function Page() {
  return <Text>Home page</Text>;
}

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

React Native for web 用于支持整个 X 网站。

或者，您可以编写仅适用于网页的 React DOM 组件，例如 <div>、<p> 等，但是这些组件将无法在原生平台上呈现。

app/index.js

export default function Page() {
  return <p>Home page</p>;
}

Expo 完全支持构建仅适用于 Web 的组件，然而，您可能希望组织您的代码，以更好地支持同时为 Web 和原生平台构建。有关更多信息，请参阅平台特定模块。

Expo SDK 中的所有库都构建支持浏览器和服务器渲染环境（如适用）。库也针对它们所针对的各个平台进行了优化。

快速刷新、调试、环境变量和打包等开发功能也完全通用，使开发者体验统一。Expo CLI 会自动优化代码，以针对单个平台构建生产版本，使用平台摇动等技术。

入门

安装 Web 依赖

Terminal

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

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

如果您还没有将 Expo 添加到您的 React Native 应用中，您可以选择安装 Expo 模块（推荐）或仅安装 expo 包并配置应用入口文件。这将允许您面向 Web，但不会包含对 Expo SDK 的支持。

在您的项目中安装 Expo CLI：

Terminal

- npm install expo

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

+ import {registerRootComponent} from 'expo';

import App from './App';
- import {AppRegistry} from 'react-native';
- import {name as appName} from './app.json';

- AppRegistry.registerComponent(appName, () => App);
+ registerRootComponent(App);

启动开发服务器

您现在可以启动开发服务器并在浏览器中进行开发：

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 打包器。