rn-project/src/components/loading.js

#### 项目介绍 类似一个脚手架的工具 此项目致力于构建一套基础，简单，可维护的 适配我司的react-native项目。可在此基础上搭建项目，封装了基础架构，基础组件，以及各种交互等；可快速进行项目搭建，开发。 # 涉及主要技术 - 1. 项目主要架构 * react native * react-navigation * redux

import React, { Component } from 'react';
import { View, StyleSheet, Modal, ActivityIndicator, Text } from 'react-native';
import PropTypes from 'prop-types';

import BaseStyle from '../constants/Style';

/**
 * 使用方法
 * 
 * 
 * import Loadding from '../components/loading';
 *   <Loadding
          loading={true}
          text={'Loading'}
        />

 */

export default class Loading extends Component {
  static defaultProps = {
    loading: false,
    text: '加载中...',
    color: '#aaa',
  };
  static propTypes = {
    loading: PropTypes.bool,
    text: PropTypes.string,
    color: PropTypes.string,
  };
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {}

  render() {
    const { loading, text, color } = this.props;

    return (
      <Modal
        animationType={'fade'}
        transparent={true}
        visible={loading}
        onRequestClose={() => {}}>
        <View style={styles.modalContainer}>
          <View style={styles.modal}>
            <ActivityIndicator size="large" color={color} />
            <Text style={styles.modalText}>{text}</Text>
          </View>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  // modelView: {
  //   flex: 1,
  //   backgroundColor: 'rgba(40,40,40,0.1)',
  //   ...BaseStyle.justifyContentCenter,
  //   ...BaseStyle.alignItemsCenter,
  // },
  modalContainer: {
    ...BaseStyle.modalBg,
    ...BaseStyle.alignItemsCenter,
    ...BaseStyle.justifyContentCenter,
    backgroundColor: 'rgba(0,0,0,0)',
  },
  modal: {
    ...BaseStyle.alignItemsCenter,
    ...BaseStyle.justifyContentCenter,
  },
  modalText: {
    ...BaseStyle.titleText,
    marginTop: 10,
  },
});