MarkLoading 在组件上方添加蒙层loading

当一个组件在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
  }
});