首页指南参考教程
This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 51).

WebView

A library that provides a WebView component.

Android
iOS

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

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

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,
  },
});
Expo 中文网 - 粤ICP备13048890号