我创建了反应原生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,
}