首页指南参考教程

与 Expo 一起开发网站

了解如何开发网络应用,以便构建通用应用。


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

¥Expo has first-class support for building full-stack websites with React. Expo websites can be statically rendered for SEO and performance, or client-rendered for a more app-like experience in the browser.

使用 React Native 网页版 中的 <Text> 组件在任何平台上渲染文本。

¥Render text on any platform with the <Text> component from React Native for web.

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>。在进行 Web 开发时,RNW 是可选的,因为你可以直接使用 React DOM,但我们在跨平台构建时经常推荐它,因为它可以最大限度地提高代码重用性。

¥React Native for web (RNW) is a set of component libraries such as <View>, and <Text>, that wrap react-dom primitives such as <div>, <p>, and <img>. RNW is optional when developing for web since you can use React DOM directly, but we often recommended it when building across platforms as it maximizes code reuse.

React Native for web 用于为整个 𝕏/推特 网站提供支持。

¥React Native for web is used to power the entire 𝕏 / Twitter website.

或者,你可以编写仅用于 Web 的 React DOM 组件,例如 <div><p> 等,但是这些组件不会在原生平台上渲染。

¥Alternatively, you can write web-only React DOM components such as <div>, <p>, and so on, however, these components won't render on native platforms.

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

Expo 完全支持构建仅限 Web 的组件,但是,你可能希望组织代码以更好地支持同时构建 Web 和原生平台。在 特定于平台的模块 中了解更多信息。

¥Building web-only components is fully supported by Expo, however, you may want to organize your code to better support building for both web and native platforms simultaneously. Learn more in platform-specific modules.

Expo SDK 中的所有库都是为了支持浏览器和服务器渲染环境(如果适用)而构建的。库还针对其目标的各个平台进行了优化。

¥All of the libraries in the Expo SDK are built to support both browser and server rendering environments (when applicable). Libraries are also optimized for the individual platforms they target.

快速刷新、调试、环境变量和 bundling 等开发功能也完全通用,从而实现统一的开发者体验。当你为生产而构建时,Expo CLI 会使用 平台晃动 等技术自动优化各个平台的代码。

¥Development features like Fast Refresh, debugging, environment variables, and bundling are also fully universal, enabling a unified developer experience. Expo CLI automatically optimizes code for individual platforms when you build for production, using techniques like platform shaking.

入门

¥Getting started

安装网络依赖

¥Install web dependencies

Terminal
npx expo install react-dom react-native-web @expo/metro-runtime
Not using the expo package in your app yet?

如果你尚未将 Expo 添加到你的 React Native 应用中,你可以选择 安装 Expo 模块(推荐)或仅安装 expo 包并配置应用入口文件。这将允许你以 Web 为目标,但不包括对 Expo SDK 的支持。

¥If you haven't added Expo to your React Native app yet, you can either install Expo modules (recommended) or just install the expo package and configure the app entry file. This will allow you to target web, but it will not include support for the Expo SDK.

  1. 在你的项目中安装 Expo CLI

    ¥Install Expo CLI in your project:

Terminal
npm install expo
  1. 修改入口文件以使用 registerRootComponent 而不是 AppRegistry.registerComponent

    ¥Modify the entry file to use registerRootComponent instead of 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);

启动开发服务器

¥Start the dev server

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

¥You can now start the dev server and develop in the browser with:

Terminal
npx expo start --web

该应用可以导出为生产网站:

¥The app can be exported as a production website with:

Terminal
npx expo export --platform web

下一章

¥Next

基于文件的路由

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

静态渲染和 SEO

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

发布网站

导出你的网站并上传到任何网络主机。

自定义 JavaScript 打包器

为你的项目定制 Metro 打包器。