首页指南参考教程

WebView

GitHub

npm

提供 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're installing this in a bare React Native app, you should also follow these additional installation instructions.

用法

¥Usage

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

¥You should refer to the react-native-webview docs for more information on the API and its usage. But the following example (courtesy of that repo) 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,
  },
});