react-native-swipeable-row-bouncing是一个基于React Native的滑动行组件，可实现左右滑动来进行删除、标记和操作等功能。本教程将详细介绍该npm包的使用方法。
安装
在项目根目录下使用npm安装react-native-swipeable-row-bouncing依赖包：
npm install react-native-swipeable-row-bouncing --save
安装完毕后，我们可以从包中导入SwipeableRowBouncing组件：
import SwipeableRowBouncing from 'react-native-swipeable-row-bouncing';
基础用法
react-native-swipeable-row-bouncing是一个可高度自定义的组件，但我们先从最基础的用法开始。
<SwipeableRowBouncing onSwipeLeft={() => alert('向左滑动')} onSwipeRight={() => alert('向右滑动')}>
<View>
<Text>左右滑动此行</Text>
</View>
</SwipeableRowBouncing>渲染后，我们就可以左右滑动此行看到效果了。
自定义样式和交互
接下来我们将自定义样式并为组件添加交互响应。首先，我们将从上一步的渲染开始，并加入删除按钮。
-- -------------------- ---- -------
---------------------
--------------- -- --------------
---------------- -- ---------------
-------------------
---------------------
-
----- -------- ---------------- ------- ---
-------------------
-------
----- -------- ---------------- ------ --------------- --------- ----------- --------- ------- ------ ---
----- -------- ------ -------- ----------- ------ ------------
-------
-----------------------在这个例子中，我们将swipeThreshold设置为50px，并将overshootFriction设置为8。这两个属性控制了滑动时的交互响应范围和弹性度。我们还设置了一个包含“删除”标记的红色色块作为滑动时出现的背景，并使其居中显示。
接下来，我们要实现滑动结束时出现按钮的动画效果。更具体地说，我们要跟踪当前滑动的位置，当它超过了-swipeThreshold时，才显示删除按钮。使用Animated库可以在组件中实现这种交互响应效果。
-- -------------------- ---- -------
------ ------ - ------- -------- - ---- --------
------ - ----- ----- -------- - ---- ---------------
------ -------------------- ---- --------------------------------------
----- ------------------------------ - -- ------------ ------------ -- -- -
----- ------------ -------------- - ----------------
----- ---- - ---------- ---------------------------
-------- ----------------------------- ------------- -
----- - -- - - -------------
------------------
---------------- - -----
-
-------- -------------------------------- -
---------------------
----- - -- - - ------------------
-- --- - ---- -
--------------
- ---- -- --- - --- -
---------------
-
--------------------- -
-------- --
--------- ----
---------------- ----
-----------
-
------ -
------
-------------- -------- ---------- -- ----------- ---- -- ---
---------------------
-------------------------
---------------------------
-------------------------------------------
-------------------------------------------------
---------------------
-
----- -------- ---------------- ------- ---
-------------------
-------
-----------------------
----------------
-------------- -------- ---------- -- ----------- ---- -- ---
----------- -- -
----- -------- ---------------- ------ --------------- --------- ----------- --------- ------- ------ ---
----- -------- ------ -------- ----------- ------ ------------
-------
--
----------------
-------
--
--
------ ------- -------------------------------在处理滑动时，我们使用一个handlePanResponderMove()方法来检查当前位置，如果当前位置位于-swipeThreshold左边，则显示删除按钮。在滑动结束时，我们先隐藏按钮，然后根据终止位置dx调用传递给组件的回调函数。最后，我们使用Animated库的timing()方法返回panX动画变量的起始值0，达到平滑滑动的效果。
完成后，嵌套一个SwipeableRowWithAnimatedButton组件，渲染即可。如下所示：
<SwipeableRowWithAnimatedButton onSwipeLeft={() => alert('删除该行数据')} onSwipeRight={() => alert('将该行数据标记为已读')} />总结
在本教程中，我们介绍了如何使用npm包react-native-swipeable-row-bouncing实现左右滑动删除和标记的功能。我们从基础用法开始，然后自定义了样式和交互响应，并添加了一个包含“删除”标记的动画按钮。希望这篇文章对学前端的读者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60059c1681e8991b448ed465