当一个组件在loading时需要阻止点击的时，使用该组件包裹，并传递loading，可以在子组件上方添加一层蒙层，并且在中间添加loading效果。
import {ActivityIndicator, StyleSheet, View} from 'react-native';
import React from 'react';
interface MarkLoadingTypeProps {
loading?: boolean;
children?: React.ReactNode;
}
class MarkLoading extends React.PureComponent<MarkLoadingTypeProps, any> {
constructor(props: MarkLoadingTypeProps) {
super(props);
this.state = {
height: 0,
};
}
onLayout = (e: {nativeEvent: any}) => {
console.log(`e-------------`, e);
// e.nativeEvent.layout.height
this.setState({
height: e.nativeEvent.layout.height,
});
};
render(): React.ReactNode {
const {loading} = this.props;
const {height} = this.state;
return (
<View style={styles.constainer} onLayout={this.onLayout}>
{loading && (
<View
style={[
styles.loadingContainer,
{
height: height,
},
]}>
<ActivityIndicator size="large" color="#999999" style={styles.ActivityIndicator}/>
</View>
)}
{this.props.children}
</View>
);
}
}
export default MarkLoading;
const styles = StyleSheet.create({
constainer: {
flex: 1,
position: 'relative',
},
loadingContainer: {
position: 'absolute',
width: '100%',
zIndex: 99,
backgroundColor: 'rgba(0, 0, 0, .05)'
},
ActivityIndicator: {
flex: 1
}
});
