提供 WebView 组件的库。
react-native-webview
提供了一个 WebView
组件,可以在原生视图中渲染 Web 内容。
¥react-native-webview
provides a WebView
component that renders web content in a native view.
¥Installation
-
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!
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:
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,
},
});