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();