react-native 实际项目解析-loading 加载中模块设计

  • Modal :这是react-native的一个模块,就是一个全屏的遮盖,可以通过这个模块配合。
  • ActivityIndicator:这是自带的加载图标。

这里主要就是通过props进来一个状态,控制是否显示。

import React, {Component} from 'react';
import {
    View,
    StyleSheet,
    Modal,
    ActivityIndicator,
} from 'react-native';
import {COMMON_STYLES} from "../common/commonStyles";

export default class Loading extends Component {
    // 设置state
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <\Modal
                    animationType='fade'           // 从底部滑入
                transparent={true}           // 不透明
                visible={this.props.showLoading}    // 根据isModal决定是否显示
                onRequestClose={() => {this.onRequestClose()}}  // android必须实现
            >
                <\View style={styles.loadingWarp}>
                    <\View >
                        <\ActivityIndicator


                                size="large"
                        \/>
                    <\/View>
                <\/View>

    <\/Modal>
    );
    }
    onRequestClose () {
        console.log(11);
    }
}

const styles = StyleSheet.create({
    loadingWarp:{
        justifyContent:'center',
        alignItems:'center',
        flex:1,
        position:'absolute',
        top:0,
        left:0,
        width:COMMON_STYLES.WIDTH,
        height:COMMON_STYLES.HEIGHT,
        backgroundColor:'rgba(0,0,0,0.3)',
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    button: {
        width: 120,
        height: 45,
        borderRadius: 5,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#4398ff',
    }
});

随机浏览