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