React native Model组件的使用

1、Model的介绍
从官方文档可以知道，Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。其实model就是一个遮盖层，可以遮盖iOS的UIViewController，也可以遮盖Android的activity。如编写各种dialog。

2、Model的使用

用Model写一个加载的loading

import React,{Component,PropTypes} from 'react';
import {View,Text,Platform,TouchableHighlight,ActivityIndicator,Modal} from 'react-native';
// import Modal from 'react-native-root-modal';

class Loading extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: !this.props.hudHidden,
      hudText:!this.props.hudText,
    }
  }
  close() {
    // alert('关闭')
    if (Platform.OS === 'android') {
      setTimeout(()=>{
       this.setState({modalVisible: false});
      },1000)
    }else {
      this.setState({modalVisible: false});
    }
  }
  show(textStr) {
    this.setState({modalVisible: true,hudText:textStr});
  }
  render() {
    if (!this.state.modalVisible) {
      return null
    }
    return (
      <Modal
        animationType={"none"}
        transparent={true}
        visible={this.state.modalVisible}
        onRequestClose={() => {}}
        >
    <View style={{flex: 1,alignItems:'center',justifyContent:'center'}}>
      <View style={{borderRadius: 10,backgroundColor:'rgba(0,0,0,0.5)',width:100,height:100,alignItems:'center'}}>
        <ActivityIndicator
          animating={true}
          color = 'white'
          style={{
            marginTop:20,
            width: 60,
            height: 60,
          }}
          size="large" />
          <Text allowFontScaling={false} style={{fontSize:15,color: 'white'}}>{this.state.hudText}</Text>
        </View>
       </View>
      </Modal>
    );
  }
}

Loading.PropTypes = {
  hudHidden: PropTypes.bool.isRequired,
  hudText: PropTypes.string,
}

export default Loading;

这个loading中有两个方法show()和close().

在代码中引用这个loading

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  Dimensions,
  Platform,
  Alert,
  ToastAndroid,
  TextInput,
  ListView,
  ActivityIndicator,
  NativeModules,
  ScrollView,
  Keyboard,
} from 'react-native';
//导航

import Loading from './loading';

class SatisfactionSurvey extends Component {

  constructor(props) {
    super(props)
    this.state = {

    }
  }


  render() {


        return(
            。。。。。。
           <Loading ref={r=>{this.Loading = r}} hudHidden = {true} hudText = {''}></Loading>//放在布局的最后即可
        );

  }
}

module.exports = SatisfactionSurvey;

在需要显示的地方调用this.Loading.show();,在需要隐藏的地方调用this.Loading.close();