时间戳

首页 > 解决方案 > React Native）如何使用 React Native Expo 显示网站？

react-native - React Native）如何使用 React Native Expo 显示网站？

问题描述

我正在尝试使用 React Native Web 构建一个网站，并且一直在尝试使用 Expo 显示我的网站。我的期望是，当我单击“在网络浏览器中运行”时，我将能够看到它（它应该打开一个带有介绍文本的空白页面），但它只会返回到 Expo 页面。我究竟做错了什么？

在此处输入图像描述

在此处输入图像描述

标签： react-nativeexporeact-native-web

解决方案

您可以使用 WebView 在 React Native Expo 应用程序上显示网页。

首先，通过这个命令安装 react-native-webview。

expo install react-native-webview

然后你可以添加这个 WebView，如下所示。

import * as React from 'react';
import { WebView } from 'react-native-webview';

export default function App() {
  return (
    <WebView 
      style={styles.container}
      source={{ uri: 'https://expo.dev' }}
    />
  );
}

您还可以像这样插入自定义 Web (html) 页面：

import * as React from 'react';
import { WebView } from 'react-native-webview';

export default function App() {
  return (
    <WebView
      style={styles.container}
      originWhitelist={['*']}
      source={{ html: '<h1><center>Hello world</center></h1>' }}
    />
  );
}

要了解更多信息，您可以阅读此 doc expo webview

推荐阅读