react native Modal 使用详解

Modal 是可以覆盖在原生视图上。

属性：

animationType：显示和隐藏的动画

slide：从底部弹出

fade：渐隐渐显

none：无

onRequestClose：android 按返回键时回调。

onShow：modal显示时回调。

transparent：背景是否透明，默认为白色。

visible：是否显示。

/**
* Created by on 2017/5/8.
*/
import React, {Component} from 'react';
import {
StyleSheet,
View,
Modal,
Button,
Alert,
} from 'react-native';

export default class ModalDemo extends Component {

static navigationOptions = {
title: 'Modal',
};

state = {
visible: false,
transparent: true,
}

render() {
return (
<View style={{flex:1}}>

<Button title='显示Modal' onPress={()=>{this.setState({visible:true})}}/>
<Modal
visible={this.state.visible}
transparent={this.state.transparent}
onRequestClose={()=>{
Alert.alert("Modal has been closed.");
}}
onShow={()=>{
Alert.alert("Modal has been show.");
}}>
<View
style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'rgba(0, 0, 0, 0.3)'}}>
<View style={{height:200,width:275,backgroundColor:'white'}}>
<Button title='关闭Modal' onPress={()=>{this.setState({visible:false})}}/>
<Button title={this.state.transparent?'不透明':'透明'} onPress={()=>{this.setState({transparent:!this.state.transparent})}}/>
</View>
</View>
</Modal>
</View>
);
}
}

github下载地址