Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity),用它可以实现遮罩的效果。
属性
Modal提供的属性有:
animationType(动画类型) PropTypes.oneOf([‘none', ‘slide', ‘fade']
onRequestClose(被销毁时会调用此函数)
在 ‘Android' 平台,必需调用此函数
onShow(模态显示的时候被调用)
transparent (透明度) bool
为true时,使用透明背景渲染模态。
visible(可见性) bool
onOrientationChange(方向改变时调用)
在模态方向变化时调用,提供的方向只是 ” 或 ”。在初始化渲染的时候也会调用,但是不考虑当前方向。
supportedOrientations(允许模态旋转到任何指定取向)[‘portrait', ‘portrait-upside-down', ‘landscape','landscape-left','landscape-right'])
在iOS上,模态仍然受 info.plist 中的 UISupportedInterfaceOrientations字段中指定的限制。
示例
Modal的使用非常简单,例如:
- <Modal
- animationType='slide' // 从底部滑入
- transparent={false} // 不透明
- visible={this.state.isModal} // 根据isModal决定是否显示
- onRequestClose={() => {this.onRequestClose()}} // android必须实现
- >
综合例子:
- import React, { Component} from 'react';
- import {
- AppRegistry,
- View,
- Modal,
- TouchableOpacity,
- Text
- } from 'react-native';
- export default class ModalView extends Component {
- constructor(props) {
- super(props);
- this.state = {
- modalVisible: false,
- }
- }
- setModalVisible = (visible)=> {
- this.setState({
- modalVisible: visible
- })
- };
- render(){
- return(
- <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffaaff'}}>
- <Modal animationType={'none'}
- transparent={true}
- visible={this.state.modalVisible}
- onrequestclose={() => {alert("Modal has been closed.")}}
- onShow={() => {alert("Modal has been open.")}}
- supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
- onOrientationChange={() => {alert("Modal has been OrientationChange.")}}>
- <View style={{flex:1, marginTop: 22, backgroundColor: '#aaaaaa', justifyContent: 'center', alignItems: 'center'}}>
- <View>
- <Text>Hello World!</Text>
- <TouchableOpacity onPress={() => {
- this.setModalVisible(false)
- }}>
- <Text>隐藏 Modal</Text>
- </TouchableOpacity>
- </View>
- </View>
- </Modal>
- <TouchableOpacity onPress={() => {
- this.setModalVisible(true)
- }}>
- <Text>显示 Modal</Text>
- </TouchableOpacity>
- </View>
- )
- }
- }
- AppRegistry.registerComponent('ModalView', ()=>ModalView);
运行效果:
从 modal 的源码可以看出,modal 其实就是使用了 绝对定位,所以当 modal 无法满足我们的需求的时候,我们就可以通过 绝对定位 自己来封装一个 modal
来源: http://www.jb51.net/article/120573.htm