在WebView加载成功后,React Native onLoadEnd事件将不会触发

时间:2018-03-22 21:07:58

标签: javascript android react-native webview

我创建了反应原生WebView的付款界面。我第一次尝试使用背景图像显示全屏自定义加载程序。打开此屏幕时会自动触发onLoadEnd事件。成功加载onLoadEnd后如何触发WebView事件?我只在 Android 中遇到此问题。

import React, { Component } from 'react';
import { View, WebView, StyleSheet, ScrollView, Dimensions, Image } from 'react-native';
import PropTypes from 'prop-types';
import PaymentLoader from './PaymentLoader';

const styles = StyleSheet.create({
    WebViewStyle:{
        backgroundColor:'white',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        zIndex:9999
    },
});

const window = Dimensions.get('window');

export default class PaymentWeb extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loader:true
        }
    }
    showIconsHandler() {
        this.setState({
            loader:false
        });
    }
    render() {
        const { loader } = this.state;
        const {url} = this.props;
        return (
            <View style={styles.WebViewStyle}>
                {loader && <PaymentLoader />}
                <WebView
                    style={{height:window.height, width:window.width}}
                    source={{uri: url}}
                    scalesPageToFit={true}
                    onLoadEnd={this.showIconsHandler.bind(this)}
                    />
            </View> 

        );
    }
}

PaymentWeb.propTypes = {
    url: PropTypes.string,
    cancelPurchase: PropTypes.func,
}

0 个答案:

没有答案