react-native-webview

提供 WebView 组件的库。

Android

iOS

Bundled version:

13.13.5

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, make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

用法

¥Usage

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

¥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,
},
});

了解更多

¥Learn more

访问官方文档

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