This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

react-native-webview

一个提供 WebView 组件的库。

Android

iOS

Included in Expo Go

GitHub

npm

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

安装

Terminal

- npx expo install react-native-webview

If you are installing this in an existing React Native app, make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

用法

基础 Webview 用法

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

Webview 内联 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,
  },
});

了解更多

访问官方文档

获取有关 API 及其用法的完整信息。