menu
refresh
shufu
这是一个前端开发记录Debug过程和杂谈的博客
react-native webView漂亮的加载条
access_time
brush 14个字
whatshot 45 ℃

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

Simulator Screen Shot - iPhone X - 2019-10-08 at 11.45.07.png

Simulator Screen Shot - iPhone X - 2019-10-08 at 11.43.31.png

#如无特别声明,该文章均为 shufu 原创,转载请遵循 署名-非商业性使用 4.0 国际(CC BY-NC 4.0) 协议,即转载请注明文章来源。
#最后编辑时间为: 2019 年 10 月 08 日


account_circle
email
explore


DreamCat

主题名称:DreamCat | 版本:X1.6-20201226

主题开发:HanFengA7 | TeddyNight | Dev-Leo | CornWorld

鸣谢:学神之女

鸣谢:学神之女