在 React Native 开发中，有时候会需要实现类似于 iOS 系统中的滑动删除效果。而 npm 包 @joshaber/react-native-swiping-row 就是一款可以帮助我们实现这一功能的插件。
本文将详细介绍如何使用 @joshaber/react-native-swiping-row 来实现 React Native 中的滑动删除效果。
安装
在开始使用 @joshaber/react-native-swiping-row 之前，我们需要先安装该插件。
安装命令如下：
$ npm install --save @joshaber/react-native-swiping-row
或者使用 yarn：
$ yarn add @joshaber/react-native-swiping-row
基本用法
使用 @joshaber/react-native-swiping-row 实现滑动删除效果非常简单，只需要在需要实现滑动删除的列表项组件中嵌套一个 <swipingrow> 组件即可。
下面是一个简单的使用示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ ---------- ---- -------------------------------------
------ ------- -------- ---------- ------ ------------ -------- -------- -- -
------ -
-----------
-------------------
--------------
----------------- -------------------
-------------------
-------------------
-
-
----------------- ------------------
----- -------- -------- -- ---
----- -------- --------- --- ----------- ------ -----------------
----- -------- --------- --- ---------- - -----------------------
-------
-------------------
-------------
--
-在上面的代码中，我们使用 <swipingrow> 组件将一个列表项组件包裹起来，并设置了我们需要的滑动阈值和右侧滑动删除按钮的内容。
其中，rightContent 属性的值为一个组件，这里我们使用的是一个简单的 TouchableOpacity 组件和一个 Text 组件，当用户在列表项上向右滑动一定距离时，会出现一个类似于 iOS 系统的删除按钮，点击该按钮会触发 onDelete 回调函数。
进阶用法
除了上面介绍的基本用法，@joshaber/react-native-swiping-row 还提供了一些进阶用法，帮助我们实现更加复杂的滑动效果。
自定义滑动内容
默认情况下，<swipingrow> 组件的右侧滑动删除按钮会有一个类似于 iOS 系统的红色背景。如果你需要自定义右侧滑动内容的样式和布局，可以将 rightContent 属性的值设置为一个自定义的组件。
下面是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ ---------- ---- -------------------------------------
------ ------- -------- ------------------ ------ ------------ -------- -- -
------ -
-----------
-------------------
--------------
----------------- ------------------ -------- ---------------- -------- --------------- -------- ---
----- -------- ------ -------- ------------------ -- --------- -------------
-------------------
-
-
----- -------- -------- -- ---
----- -------- --------- --- ----------- ------ -----------------
----- -------- --------- --- ---------- - -----------------------
-------
-------------
--
-在上面的代码中，我们将 rightContent 属性的值设置为一个自定义的 TouchableOpacity 组件，该组件的样式和布局被我们自行控制。
禁用滑动
如果我们希望有些列表项不支持滑动删除，可以将 <swipingrow> 组件的 disabled 属性设置为 true。这样，在该列表项上进行任何滑动操作都不会触发滑动删除效果。
下面是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ ---------- ---- -------------------------------------
------ ------- -------- -------------------- ------ ----------- -- -
------ -
-----------
-------------------
---------------
--------------
----------------- -------------------
-------------------
-------------------
-
-
------------------
----- -------- -------- -- ---
----- -------- --------- --- ----------- ------ -----------------
----- -------- --------- --- ---------- - -----------------------
-------
-------------------
-------------
--
-在上面的代码中，我们将 disabled 属性的值设置为 true，这样在该列表项上进行任何滑动操作都不会触发滑动删除效果。
结语
@joshaber/react-native-swiping-row 是一款非常实用的 React Native 插件，可以帮助我们轻松实现类似于 iOS 系统中的滑动删除效果。
本文对 @joshaber/react-native-swiping-row 的基本用法和进阶用法进行了详细介绍，并提供了相应的示例代码。希望读者可以通过本文掌握使用该插件的方法，为自己的 React Native 开发工作带来便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f381e8991b448e0ad5