在React Native开发中，我们常常需要弹框组件。而react-native-modal-no-unmount正是一款使用方便，并且功能丰富的弹框组件。本文将详细介绍npm包 react-native-modal-no-unmount的使用教程，并提供示例代码以作参考。
安装
可以通过npm进行安装，输入以下命令：
npm install --save react-native-modal-no-unmount
使用
引入组件
import RNModal from 'react-native-modal-no-unmount';
设置State
this.state = {
isVisible: false,
}显示弹框
this.setState({ isVisible: true });隐藏弹框
this.setState({ isVisible: false });渲染组件
-- -------------------- ---- -------
--------
--------------------------------
------------------- -- --------------- ---------- ----- ---
---------------------
-
----- -------- ----- - ---
-------------------
-------
----------参数说明
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| isVisible | bool | false | 控制弹框的显示与隐藏 |
| onBackdropPress | func | N/A | 当弹框背景被按下时触发 |
| backdropOpacity | number | 0.5 | 弹框背景的透明度，默认为0.5 |
| animationIn | string | “fade” | 弹框显示时的动画名称 |
| animationInTiming | number | 300 | 弹框显示时动画的持续时间 |
| animationOut | string | “fade” | 弹框隐藏时的动画名称 |
| animationOutTiming | number | 300 | 弹框隐藏时动画的持续时间 |
| useNativeDriver | bool | false | 是否使用原生驱动动画，默认为false |
| avoidKeyboard | bool | true | 是否避开软键盘，默认为true |
| backdropColor | string | “black” | 弹框背景的颜色，默认为“black” |
| backdropTransitionInTiming | number | 300 | 弹框显示时背景动画的持续时间 |
| backdropTransitionOutTiming | number | 300 | 弹框隐藏时背景动画的持续时间 |
| renderContent | func | N/A | 可自定义渲染弹框的内容 |
| propagateSwipe | bool | false | 是否沿用触摸滑动确认事件到弹框的子元素 |
示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ ------- ---- --------------------------------
----- ------- ------- --------- -
------------------ -
-------------
---------- - -
---------- ------
--
-
-------- -
------ -
----- -------- ----- - ---
----------------- ----------- -- --------------- ---------- ---- ----
---------------------
-------------------
--------
--------------------------------
------------------- -- --------------- ---------- ----- ---
---------------------
-
----- -------- ----- - ---
-------------------
----------------- ----------- -- --------------- ---------- ----- ----
---------------------
-------------------
-------
----------
-------
--
-
-通过上述示例代码及相关参数说明，相信大家已经可以基本掌握npm包 react-native-modal-no-unmount的使用方法，可以在项目中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005727081e8991b448e8a73