在移动端应用开发中，滑动删除操作是一项非常基础而又常见的需求。@txie/react-native-swipeout是一个使用React Native实现的一款简易的滑动删除组件库。本文将介绍如何使用@txie/react-native-swipeout。
安装
@txie/react-native-swipeout需要Node.js和npm的支持，因此首先要确保已安装了它们。安装@txie/react-native-swipeout只需要在终端运行以下命令：
npm install @txie/react-native-swipeout --save
该命令会在当前项目中安装最新版本的@txie/react-native-swipeout并自动添加到package.json中。
使用
安装完@txie/react-native-swipeout后，可以通过以下方式在React Native应用中使用它：
------ -------- ---- ------------------------------
----- -------------- ------- --------- -
-------- -
----- ------------ - -
-
----- ---------
---------------- ------
-------- -- -- ------------------- ---------
-
--
------ -
--------- ---------------------
------
------
----- ----- -- --- ------
-------
-------
-----------
--
-
-该代码将创建一个包含一个"Button"按钮的滑动删除组件。@txie/react-native-swipeout支持左右滑动操作，可以通过left或right属性来设置展示的按钮。
Swipeout组件支持以下属性：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| right | Array | [] | 按钮列表，左滑为空数组 |
| left | Array | [] | 按钮列表，右滑为空数组 |
| autoClose | Boolean | true | 是否自动关闭滑动操作，为false时需要手动关闭 |
| backgroundColor | String | '#dbddde' | 组件背景颜色 |
| close | Boolean | false | 是否关闭打开的所有滑动删除操作 |
| disabled | Boolean | false | 是否禁用滑动删除操作 |
| scroll | Function | null | 回调函数，当滚动时调用。返回值为true表示组件处于开启状态 |
| sensitivity | Number | 50 | 触发滑动删除操作的移动距离 |
| buttonWidth | Number | null | 按钮宽度，设置后所有按钮的宽度都统一 |
| buttonHeight | Number | null | 按钮高度，设置后所有按钮的高度都统一 |
| buttonStyle | StyleSheet | null | 自定义按钮样式 |
| onOpen | Function | null | 打开滑动删除操作时的回调函数 |
| onClose | Function | null | 关闭滑动删除操作时的回调函数 |
| style | StyleSheet | null | 组件样式 |
| rowID | String | null | 组件ID，用于处理多个Swipeout组件的冲突问题 |
| sectionID | String | null | 组件所在的Section ID，用于处理多个Swipeout组件的冲突问题 |
| swipeStartMinDistance | Number | 10 | 最小触发滑动操作的距离，如果小于该值则不触发划动动作 |
| swipeStopMinDistance | Number | 30 | 最小停止滑动操作的距离，如果小于该值则不触发结束滑动动作 |
按钮元素支持以下属性：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| text | String | '' | 按钮上的文本，可以通过该属性传递文本 |
| type | String | 'default' | 按钮的类型，可以在typeMaps中自定义 |
| backgroundColor | String | 'transparent' | 按钮背景颜色，可以通过该属性传递颜色，RGBA类型颜色同样适用 |
| color | String | '#ffffff' | 按钮文本颜色 |
| disabled | Boolean | false | 是否禁用按钮 |
| onPress | Function | null | 按钮被按下时调用的回调函数 |
| component | Component | null | 显示在按钮中的React组件，可以任意添加自定义元素。 |
示例
下面是一个示例演示如何使用Swipeout操作：
------ ------ - --------- - ---- --------
------ - ----- ----- ---------- - ---- ---------------
------ -------- ---- ------------------------------
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
------------ ----------
------------ --
------------- --
------- --
---------------- ----------
--
----- -
--------- ---
----------- -------
------ ----------
------- ---
--
------- -
---------------- ------
-
---
----- ------------ ------- --------- -
------------------ -
-------------
---------- - -
----- -
-
--- --
------ ------ --- ------ -------
------ ----------
--
-
--- --
------ ------ ------ -------
------ ----------
--
-
--
-
------------ - ---- -- -
----- ------- - ----------------------------- -- ------- --- ----
---------------
----- --------
---
-
----------------- - ------ -- -
------ -
-
----- ---------
-------- -- -- ---------------------------
----- ---------
---------------- ----------
-
--
-
--------- - ------ -- -
------ -
--------- ------------------------------------ ---------------- ----------------------------
----- ------------------------- ----------------- --------------
----- ---------------------------------------
-------
-----------
--
-
-------- -
------ -
----- ------------- ----
--------------------------- -- ----------------------
-------
--
-
-
------ ------- -------------结语
@txie/react-native-swipeout是一款简易、易用的滑动删除组件库，不需要过多的学习成本，可以快速实现常见的滑动删除操作。希望通过本文的介绍，您已经掌握了使用该库的方法，能够在实际应用中使用它的功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600566ac81e8991b448e2e7f