原本的代码：

renderActivityIndicator () {
    if (this.state.animating === false) {return null;}
    
    return (
        <View style={{position: 'absolute',width:mzcKit.size.width,height:this.theContentLayout2.height,backgroundColor:'rgba(0,0,0,0.5)',justifyContent:'center',alignItems:'center'}}>
                <ActivityIndicator style={{}}
                                   animating={this.state.animating}
                                   size={'large'}
                                   hidesWhenStopped={true}
                                   color="#fff"/>
        </View>
    );
}

封装后的使用：

renderActivityIndicator () {
    if (this.state.animating === false) {return null;}
    
    return (<FFFActivityIndicator show={this.state.animating} height={this.theContentLayout2.height}/>);
}

封装了什么呢？
下面是完整代码：

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    ActivityIndicator,
} from 'react-native';

import mzcKit from 'react-native-mzckit';

type Props = {};
export default class FFFActivityIndicator extends Component<Props> {

    constructor(props) {
        super(props);

        this.state = {

        };
    }

    render() {
        if (this.props.show === false) {
            return null;
        }
        return (
            <View style={{position: 'absolute',width:mzcKit.size.width,height:this.props.height,backgroundColor:'rgba(0,0,0,0.5)',justifyContent:'center',alignItems:'center'}}>
                <ActivityIndicator style={{}}
                                   animating={true}
                                   size={'large'}
                                   hidesWhenStopped={true}
                                   color="#fff"/>
            </View>
        );
    }

    componentDidMount() {

    }
}

const styles = StyleSheet.create({

});