Swipeout 是 React Native 中一个流行的组件库，它提供了一个漂亮的、可定制的侧滑菜单。@pqart/react-native-swipeout 是 Swipeout 组件的一个扩展，它增加了更多的特性和用例，可以更方便的实现各种定制。
安装
首先，需要安装 @pqart/react-native-swipeout。执行以下命令：
npm install @pqart/react-native-swipeout --save
然后，在你的代码中使用它：
import Swipeout from '@pqart/react-native-swipeout';
基本用法
@pqart/react-native-swipeout 的基本用法与 Swipeout 相同。它接受一个数组作为 props，每个数组项代表一个菜单项：
-- -------------------- ---- -------
---------
--------
- ----- ------ -------- ------------ --
- ----- ------ -------- ------------ --
--
-
------
---------- -----------
-------
-----------这会在 cell 右侧显示两个按钮。当用户点击按钮时，对应的 onPress 事件将被调用。
更多特性
@pqart/react-native-swipeout 还提供了一些额外的特性，使其更加灵活和定制化。
支持多行菜单
可以通过使用 Swipeout 的 rowSpan 属性来支持多行菜单：
-- -------------------- ---- -------
---------
--------
- ----- ------ -------- ------------- -------- - --
- ----- ------ -------- ------------ --
--
-
------
---------- -----------
------------------
-------
-----------上面的菜单将会在 cell 的前两行中显示。
支持自定义样式
可以通过使用 Swipeout 的 style 和 buttonStyle 属性来自定义菜单和按钮的样式：
-- -------------------- ---- -------
---------
-------- ---------------- -------- -------- -- --
-------------- ---------------- ------ ------- --- --------------- -------- --
--------
- ----- ------ -------- ------------ --
- ----- ------ -------- ------------ --
--
-
------
---------- -----------
-------
-----------支持滑动过程中的回调
可以通过使用 Swipeout 的 onSwipe 和 onClose 属性来进行滑动过程中的回调。onSwipe 将在滑动时调用，onClose 将在菜单关闭时调用：
-- -------------------- ---- -------
---------
---------------------
---------------------
--------
- ----- ------ -------- ------------ --
- ----- ------ -------- ------------ --
--
-
------
---------- -----------
-------
-----------支持自定义图标
可以通过使用 Swipeout 的 icon 属性来自定义按钮的图标：
-- -------------------- ---- -------
---------
--------
- ----- ------ -------- ------------- ----- ---------------------- --
- ----- ------ -------- ------------- ----- ---------------------- --
--
-
------
---------- -----------
-------
-----------完整示例
下面是一个完整的示例，演示 Swipeout 的所有特性：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------- - ---- ---------------
------ -------- ---- -------------------------------
------ ------- -------- ----- -
-------- -------------- -
-----------------------
-
-------- -------------- -
-----------------------
-
-------- ------------- -
----------------------
-
-------- ------------- -
---------------------
-
------ -
----- -------------------------
---------
-------- ---------------- -------- -------- -- --
-------------- ---------------- ------ ------- --- --------------- -------- --
---------------------
---------------------
--------
- ----- ------ -------- ------------- ----- ---------------------- --
- ----- ------ -------- ------------- ----- ---------------------- --
--
-
----- --------------------
---------- -----------
------------------
-------
-----------
---------
-------------- ---------------- -------- ------- --- --------------- -------- --
--------
- ----- ------ -------- ------------- -------- - --
- ----- ------ -------- ------------ --
--
-
----- --------------------
------------------
-------
-----------
-------
--
-
----- ------ - -------------------
---------- -
----- --
----------- ---
--
----- -
------- ---
--------------- ---------
----------- ---------
--
---结论
@pqart/react-native-swipeout 扩展了 Swipeout 组件的能力，提供了更灵活、更自定义的侧滑菜单功能。通过本文的介绍和示例，相信读者可以更快速的掌握和使用本组件，提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551b681e8991b448cf16e