Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity),用它可以实现遮罩的效果。
属性
Modal提供的属性有:
animationType(动画类型)
PropTypes.oneOf([‘none',‘slide',‘fade']- none:没有动画
- slide:从底部滑入
- fade:淡入视野 @H_403_19@
onRequestClose(被销毁时会调用此函数)
onShow(模态显示的时候被调用)
transparent (透明度) bool
为true时,使用透明背景渲染模态。
visible(可见性)
boolonOrientationChange(方向改变时调用)
在模态方向变化时调用,提供的方向只是 ” 或 ”。在初始化渲染的时候也会调用,但是不考虑当前方向。
supportedOrientations(允许模态旋转到任何指定取向)[‘
portrait',‘portrait-upside-down',‘landscape','landscape-left','landscape-right'])在iOS上,模态仍然受 info.plist 中的 UISupportedInterfaceOrientations字段中指定的限制。
示例
Modal的使用非常简单,例如:
{this.onRequestClose()}} // android必须实现
>
综合例子:
{
this.setState({
modalVisible: visible
})
};
render(){
return(
{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.")}}>
Hello World!
{
this.setModalVisible(false)
}}>
隐藏 Modal
{
this.setModalVisible(true)
}}>
显示 Modal
)
}
}
AppRegistry.registerComponent('ModalView',()=>ModalView);
运行效果:
从 modal 的源码可以看出,modal 其实就是使用了 绝对定位,所以当 modal 无法满足我们的需求的时候,我们就可以通过 绝对定位 自己来封装一个 modal