- javascript 编写,不涉及原生代码
- 支持 Android 以及 IOS
- 支持自定义进出场动画
- 支持多个 Modal 同时存在
npm
npm i react-native-smart-modal -S
yarn
yarn add react-native-smart-modal
名称 | 默认值 | 类型 | 描述 |
---|---|---|---|
visible | true | boolean | 模态框显示隐藏 |
onChange | - | (visible: boolean) => void | 模态框状态已经改变时调用的回调 |
onWillChange | - | (visible: boolean) => void | 模态框状态将要改变时调用的回调 |
animation | animations.slideDown | {from: rmotion['from'], animate: rmotion['animate'], exit?: rmotion['animate']} | 进场动画 |
animationConf | - | rmotion['config'] | 出场动画 |
mask | true | boolean | 是否渲染遮罩 |
maskCloseable | true | boolean | 遮罩是否可点击关闭 |
maskBackgroundColor | #000 | string | 遮罩背景颜色 |
style | - | ViewStyle | 容器样式 |
avoidKeyboard | false | boolean | 是否响应键盘弹出收起时,自动推动内容位置 |
keyboardDismissWillHide | false | boolean | 在模态框关闭的时候收起键盘 |
verticalLayout | 'bottom' | 'center' 'top' 'bottom' | 垂直方向内容位置 上 中 下 |
horizontalLayout | - | 'center' 'left' 'right' | 水平方向内容位置 左中右 |
children | - | React.ReactElement | 要展示的组件 |
fullScreen | true | boolean | 是否全屏展示,全屏展示时在根节点创建元素,否则在父元素下创建 |
backHandlerType | 'reaction' | 'none' 'reaction' 'disabled' | android 物理返回键的响应策略 |