首页指南参考教程

WebView

提供 WebView 组件的库。

Android

iOS

react-native-webview 提供了一个 WebView 组件，可以在原生视图中渲染 Web 内容。

¥react-native-webview provides a WebView component that renders web content in a native view.

安装

¥Installation

Terminal

- npx expo install react-native-webview

If you are installing this in an existing React Native app (bare workflow), start by installing expo in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.

用法

¥Usage

你应该参考 react-native-webview 文档以获取有关 API 及其用法的更多信息。以下示例（由该存储库提供）是一种快速启动和运行的方法！

¥You should refer to the react-native-webview documentation for more information on the API and its usage. The following example (courtesy of that repository) is a quick way to get up and running!

Basic Webview usage

import { WebView } from 'react-native-webview';
import Constants from 'expo-constants';
import { StyleSheet } from 'react-native';

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
});

内联 HTML 的最小示例：

¥Minimal example with inline HTML:

Webview inline HTML

import { WebView } from 'react-native-webview';
import Constants from 'expo-constants';
import { StyleSheet } from 'react-native';

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
});