react-native webview漂亮的加载条

使用ant-design作为ui框架使用

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import { Component } from 'react';
import {View, Text} from 'react-native'
import { Container } from 'native-base';
import { Progress } from '@ant-design/react-native';
import { WebView } from 'react-native-webview';

type Props = {};
export default class WebView extends Component<Props> {
  state = {
    progress: 0,
  };
  render() {
    const { progress } = this.state;
    const { navigation } = this.props;
    const { state } = navigation;
    const uri = state.params.url;
    return (
      <Container style={styles.style}>
        {progress < 100 && (
          <View style={{height:4}}><Progress unfilled={false} barStyle={{ height: 4 }} style={{ height: 4 }} percent={progress} /></View>
        )}
        <View style={{flex:1}}>
          <WebView
            javaScriptEnabled={true}
            allowUniversalAccessFromFileURLs={true}
            onShouldStartLoadWithRequest={request => {
              return true;
            }}
            originWhitelist={['*']}
            useWebKit={true}
            source={{ uri }}
            onLoadProgress={({ nativeEvent }) => this.setState({ progress: nativeEvent.progress * 100 })}
          />
        </View>
      </Container>
    );
  }
}