# react-native-smart-modal > ## 特性 Latest version **2.2.0** (published 2022-07-19) · 0 weekly downloads ## Install ```sh npm install react-native-smart-modal pnpm add react-native-smart-modal yarn add react-native-smart-modal bun add react-native-smart-modal ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.2.0 | | Published | 2022-07-19 | | First published | 2019-11-19 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 6 | | Unpacked size | 28.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Maintainers | liuyunjs | | Keywords | react-native-modal, react-native-smart-modal, modal, smart-modal, portal, react-native, rn-modal | ## Links - npm: https://www.npmjs.com/package/react-native-smart-modal - Repository: https://github.com/liuyunjs/react-native-modal - Homepage: https://github.com/liuyunjs/react-native-modal#readme - Issues: https://github.com/liuyunjs/react-native-modal/issues - npm.io page: https://npm.io/package/react-native-smart-modal ## Dependencies (6) - [rmotion](https://npm.io/package/rmotion.md) ^2.2.1 - [rn-mask](https://npm.io/package/rn-mask.md) ^2.1.1 - [rn-darkly](https://npm.io/package/rn-darkly.md) ^2 - [@liuyunjs/hooks](https://npm.io/package/@liuyunjs/hooks.md) ^1 - [@liuyunjs/utils](https://npm.io/package/@liuyunjs/utils.md) ^1 - [react-native-portal-view](https://npm.io/package/react-native-portal-view.md) ^2 ## Alternatives - [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads - [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads - [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads - [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads - [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads ## Recent versions - 2.2.0 (latest) — 2022-07-19 - 3.0.0-beta2 (beta) — 2022-07-10 - 3.0.0-beta1 — 2022-07-09 - 2.1.2 — 2022-06-25 - 2.1.1 — 2022-06-23 - 2.1.0 — 2022-06-13 - 2.0.0 — 2022-05-29 - 1.1.0 — 2021-11-03 - 1.0.13 — 2021-09-04 - 1.0.12 — 2021-09-04 - 1.0.11 — 2021-08-12 - 1.0.10 — 2021-07-23 - 1.0.9 — 2021-07-23 - 1.0.8 — 2021-07-19 - 1.0.8-beta2 — 2021-07-19 - … 16 more at https://npm.io/package/react-native-smart-modal/versions ## README # react-native-smart-modal ## 特性 1. javascript 编写，不涉及原生代码 2. 支持 Android 以及 IOS 3. 支持自定义进出场动画 4. 支持多个 Modal 同时存在 ## 安装 > npm ```shell npm i react-native-smart-modal -S ``` > yarn ```shell yarn add react-native-smart-modal ``` ## 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 物理返回键的响应策略 | --- ## **animations** --- _Source: https://npm.io/package/react-native-smart-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._