通用的模态弹层组件,支持多种位置/动画效果

Modal

使用说明

基本用法

简单的设置 visible 属性即可渲染出一个模态弹层组件。

<Modal visible={true}>
    <Text>modal content</Text>
</Modal>

注意：Modal 组件默认渲染在其直接父元素的视图中，所以请将 Modal 组件作为需要弹层的 View 的最后一个直接子元素。例如：想全局使用弹层效果，请将 Modal 组件作为顶层 View 的最后一个直接子元素。

动画

在 animation 属性中可设置组件打开、关闭过程的动画效果。

<Modal animation='fade'>
    <Text>fade animation</Text>
</Modal>

位置

在 position 属性中可设置组件模态层显示的位置。

<Modal
    animation="slideFromBottom"
    position="bottom"
>
    <Text>ActionSheet组件效果</Text>
</Modal>

属性

visible =={ bool }==

模态层显示/隐藏属性

默认值: false

onShow =={ function }==

模态层显示时的时间回调

默认值: ()=>{}

onHide =={ function }==

模态层隐藏时的事件回调

默认值: ()=>{}

onMaskPress =={ function }==

点击遮罩层时的事件回调

默认值: ()=>{}

animation =={ string/array }==

设置打开/关闭模态框时的动画效果。

已经实现的几种动画效果为:"fade","slideFromBottom","slideFromTop","slideFromLeft","slideFromRight"

除了使用已经实现的动画效果,你也可以自定义动画效果,这个时候应该给animation属性传入一个数组,形式为

    [
    show:[
        {
        style:要绑定动画效果的css属性,必需
        toValue:目标值,必需
        duration:动画持续时间,必需
        easing:easing函数,默认为Easing.ease,请参考RN的Easing类
        },
        ...可以继续传入其他动画配置,这些动画会并行的执行(调用Animated.Timing)
    ],
    hide:[...和show的配置相同]
    ]

以下是fade效果的animation属性配置,可以用来参考:

    {
    show:[
        {
        style:'opacity',
        toValue:1,
        duration:200
        }
    ],
    hide:[
        {
        style:'opacity',
        toValue:0,
        duration:200
        }
    ]
    }

默认值: "none"

maskOpacity =={ number }==

遮罩层的透明度[0-1]

默认值: 0.4

offset =={ number }==

可以通过设置offset来使模态框向上/向下偏移,例如-100就可以让模态层向上偏移100个像素

默认值: 0

position =={ string }==

设置模态层显示的位置,共支持5种位置:center,top,bottom,left,right,默认为center

默认值: center

showNavBarMask =={ bool }==

是否让遮罩层遮盖住导航条,只对Ext的导航条生效

默认值: true

Loading
Picker