简介
react-native-swipeout-plus 是一个 React Native 的第三方 npm 包，它使用简单，可以实现 iOS 系统上的滑动删除效果。通过这个包，我们可以在 React Native 中优雅地完成 iOS 上的侧滑删除功能，给用户更好的体验。
安装
我们可以通过 npm 安装这个包，使用以下命令：
- --- ------- --------------------------
当然，你也可以使用 yarn 安装：
- ---- --- --------------------------
使用
react-native-swipeout-plus 要求 React Native 的版本大于等于 0.60，并且需要安装 react-native-gesture-handler。
基础用法
在我们的 RN 项目中导入 react-native-swipeout-plus 的组件 SwipeoutPlus，进行简单的配置即可实现滑动删除的效果。
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ ------------ ---- -----------------------------
----- ---- - -
- --- -- ------ -------------- --
- --- -- ------ ------ -
--
----- ------- - -- -- -
------ -
----- -------- ----- - ---
-------------- -- -
------------- ------------- --------
-
----- -----
---------------- ------
-------- -- -- --------------- ----------------
--
---
----- -------- ------- -- ---
-------------------------
-------
---------------
---
-------
-
-以上代码中配置了 SwipeoutPlus 组件的 right 属性，表示需要实现右划删除的效果。其中，text、backgroundColor 和 onPress 分别表示按钮的文字、颜色和点击事件。
进阶用法
在配置的时候，可以通过 SwipeoutPlus 的 props 对像配置更多的参数。
我们来看下 SwipeoutPlus 的全部参数：
| 参数名 | 类型 | 说明 |
|---|---|---|
| left | array | 左侧滑动按钮配置 |
| right | array | 右侧滑动按钮配置 |
| close | boolean | 关闭滑动删除，必须设置 |
| autoClose | boolean | 滑动时，是否自动关闭菜单，默认为 true |
| scroll | function | 允许滚动时，未滑动删除时，需要返回true可用于长列表问题 |
| sensitivity | number | 滑动事件的灵敏度，默认为 70 |
| disabled | boolean | 禁用滑动删除 |
SwipeoutPlus 除了基本的左右滑动删除，还可以支持左右两端显示按钮。例如，我们可以把 left 修改为如下：
-------------
-------------
-----
-------
-
----- -------
---------------- ----------
------ -------
--
-
----- -----
---------------- ----------
------ -------
--
--
--------
-
----- -----
---------------- ------
-------- -- -- --------------- ----------------
--
--
-
----- -------- ------- -- ---
-------------------------
-------
---------------总结
通过 react-native-swipeout-plus，我们可以在 React Native 中很方便地实现滑动删除功能，在用户的实际使用当中体现出更高的交互性和易用性。SwipeoutPlus 的配置参数比较多，掌握了这些参数后，更能灵活地配置出符合业务需求的滑动删除效果。
示例代码：https://github.com/EthanZhq/react-native-swipeout-plus-demo
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600556d581e8991b448d3acc