ReactNative|ReactNative WebView加载网页实现进度条 ReactNativeWebView加载网页实现进

经常看到app里面加载html都会有进度条显示，ReactNative虽然也有自己的组件WebView，但这个组件并没有返回加载进度的方法。使用WebView时还有有如下警告

文章图片
10.png
意思是WebView以后也会被废弃，官方推荐我门使用 react-native-webview 【ReactNative|ReactNative WebView加载网页实现进度条】
使用react-native-webview加载html显示进度条，效果如下：

文章图片
效果图.gif

使用组件：react-native-webview

使用方式

$ yarn add react-native-webview $ react-native link react-native-webview

代码如下：

import React, {Component} from 'react'; import { StyleSheet, View, ProgressViewIOS } from 'react-native'; import {WebView} from "react-native-webview"; export default class WebViewDemo extends Component { constructor(props) { super(props); this.state = { progress: 0, }; }render() { return ( {this.state.progress !== 1 && } this.setState( {progress: nativeEvent.progress} )} /> ) } }const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, titleBar: { height: 64, backgroundColor: '#ffc0cb', justifyContent: 'center', alignItems: 'center' }, });