在移动端开发中，滑动删除操作是很常见的功能，不仅可以优化用户体验，而且可以提高应用的交互性。而 react-native-swipe-row 就是一个用于实现滑动删除效果的 npm 包。本篇文章将针对这个 npm 包进行详细的使用教程，包含示例代码。
安装
首先需要在项目中安装 react-native-swipe-row。可以通过以下命令来进行安装：
npm install react-native-swipe-row --save
导入
在需要使用部分的 js 文件中导入 SwipeRow 组件：
import SwipeRow from 'react-native-swipe-row';
基本使用
在下面的示例中我们将展示 SwipeRow 组件的最简单的用法，我们将从左向右滑动来显示删除按钮：
<SwipeRow leftOpenValue={75} rightOpenValue={-75}>
<Text style={{textAlign: 'center'}}>Swipe me left</Text>
</SwipeRow>上面代码块中，我们生成了一个 SwipeRow 组件，并且通过 leftOpenValue 和 rightOpenValue 属性来设置按钮在左侧和右侧的初始位置。
带有删除按钮的使用
在下面的示例中我们将展示如何在 SwipeRow 组件中添加一个带有删除图标的按钮：
-- -------------------- ---- -------
---------
------------------
--------------------
------
------- ------ ----------- -- ---------------------
----- ------ ------------ --
---------
-
------
------
-----------------
-------
-
--上述代码块中，我们添加了一个 left 属性来定义我们的按钮，同时给按钮添加了一个 onPress 事件以便在点击删除按钮时触发。
带有多个按钮的使用
在下面的示例中我们将展示如何在 SwipeRow 组件中添加多个按钮：
-- -------------------- ---- -------
---------
------------------
--------------------
------
------- ------ ----------- -- ---------------------
----- ------ ------------ --
---------
-
------
------
-----------------
-------
-
-------
------- ------- ----------- -- ---------------------
----- ------ ----------- --
---------
-
--上述代码块中，我们添加了一个 right 属性以创建一个具有收藏图标的按钮。
自定义样式
在上述使用示例中，我们可以发现 SwipeRow 组件默认的样式并不完全符合我们的需求。那么如何自定义样式呢？我们可以在 SwipeRow 组件内部添加样式来实现自定义样式。
-- -------------------- ---- -------
---------
------------------
--------------------
------
------- ------ ----------- -- ---------------------
----- ------ ------------ --
---------
-
------
----- ------------------------
-----------------
-------
-
-------
------- ------- ----------- -- ---------------------
----- ------ ----------- --
---------
-
--上面代码块中，我们添加了一个样式为 rowStyle 的 View 组件，达到了自定义样式的目的。
带状态的列表示例
最后，我们将使用 SwipeRow 构建一个带有状态的列表示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ----- ----------- ---------- - ---- ---------------
------ -------- ---- -------------------------
------ - ------- ---- - ---- --------------
------ ------- -------- ----- -
----- ------ -------- - ----------
-----
-----
-----
-----
-----
---
----- ------------ - ------- ------- -- -
----- ------- - ----------
--------------------- ---
-----------------
--
----- --------- - --------- ------- ------ ------- -- -
---------
-----------
------------------
--------------------
------
------- ------ ----------- -- ---------------------
----- ------ ------------ --
---------
-
------
----- -------------------
----------------------
-------
-
-------
------- ------- ----------- -- ---------------------
----- ------ ----------- --
---------
-
--
--
------ -
----------- -----------------------------------------
---------------------
-------------
--
-
----- ------ - -------------------
---------- -
--------- --
--------------- ---------
----------- ----------
--
---- -
----- --
--------------- ---------
------------------ ---
---------------- -------
------------- --
--
---上述代码块中，我们使用了 useState 来存储数据列表，使用 handleDelete 方法来处理列表项的删除操作，并在 renderRow 方法中给每一个列表项添加 Swipe Row 组件。最后通过 ScrollView 来展示整个列表。
以上就是 react-native-swipe-row 的使用教程，希望能帮助到大家。若有疑问或建议欢迎在评论区留言，感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005669d81e8991b448e2d50