React-Native 组件之 Modal的使用详解

前端之家收集整理的这篇文章主要介绍了React-Native 组件之 Modal的使用详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity),用它可以实现遮罩的效果

属性

Modal提供的属性有:

animationType(动画类型)

PropTypes.oneOf([‘none',‘slide',‘fade']

  • none:没有动画
  • slide:从底部滑入
  • fade:淡入视野
  • @H_403_19@

    onRequestClose(被销毁时会调用函数

    在 ‘Android' 平台,必需调用函数

    onShow(模态显示的时候被调用

    transparent (透明度) bool

    为true时,使用透明背景渲染模态。

    visible(可见性)

    bool

    onOrientationChange(方向改变时调用

    在模态方向变化时调用,提供的方向只是 ” 或 ”。在初始化渲染的时候也会调用,但是不考虑当前方向。

    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

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章