介绍
react-native-swipeout 是一个 React Native 组件库，可用于实现左右滑动操作栏功能。这个库的使用非常简单，同时也拥有强大的功能。
在本文中，我们将提供详细的使用教程。我们将向您展示如何使用 react-native-swipeout 实现左右滑动操作栏，以及如何使用其它高级功能。
安装
在使用 react-native-swipeout 之前，您需要先安装它。
您可以通过 npm 包管理器来安装 react-native-swipeout。在 Terminal 上输入以下命令即可：
npm install react-native-swipeout --save
基础使用
现在您已经成功安装了 react-native-swipeout，接下来我们将向您介绍它的基础用法。
在您的 React Native 项目中，您需要先导入 react-native-swipeout，并在组件中使用它。
这里有一个最简单的示例代码，可以帮助您快速了解如何使用：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ -------- ---- ------------------------
----- --------------- ------- --------- -
------------------ -
-------------
---------- - -
------------- -
- ----- ------- --- ---------------- --------
- ----- ------- --- ---------------- ------
-
-
-
-------- -
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
---------
----- - -------------------------
---------------- -------
---------- ------
-
----------- ---------
-----------
-------
--
-
-
------ ------- ----------------在这个示例中，我们创建了一个 Swipeout 组件，其中包含一个 Text 组件。我们还定义了两个按钮作为此 Swipeout 组件的 right 参数。
当您向左滑动此 Swipeout 组件时，它将显示这两个按钮。
我们还通过 backgroundColor 参数设置了背景颜色，以及通过 autoClose 参数指定为 true 来实现自动关闭。
高级使用
现在我们已经介绍了基本用法，接下来我们将向您介绍如何使用 react-native-swipeout 实现更高级的功能。
支持方向
react-native-swipeout 可以支持多个方向，如只支持左滑、只支持右滑或支持两个方向。
我们可以通过 left、right、top、bottom 来实现多个方向的支持。
在下面的示例中，我们定义了两个按钮作为此 Swipeout 组件的 left 参数。
<Swipeout
left = {this.state.swipeoutBtns}
backgroundColor= 'white'
autoClose= 'true'
>
<Text>Swipe Me</Text>
</Swipeout>自定义按钮
除了默认提供的按钮以外，您还可以自定义按钮。
在下面的示例中，我们将自定义一个按钮：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----------------- ---- - ---- ---------------
------ -------- ---- ------------------------
----- --------------- ------- --------- -
------------------ -
-------------
---------- - -
------------- -
-
----- -
----- -------- -------------- ------ ----------- -------- ---
------------ ----------------- --------- -----------------
----- -------- ------ ---------- ----------- -- --------------
-------
--
---------------- ----------
-------- -- -- ----------------- ----------
-
-
-
-
-------- -
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
---------
----- - -------------------------
---------------- -------
---------- ------
-
----------- ---------
-----------
-------
--
-
-
------ ------- ----------------在这个示例中，我们定义了一个自定义按钮，其中包括一个 FontAwesome 图标和一段文本。我们还将 onPress 属性设为一个函数，以在按钮点击时触发。
事件
除了自定义按钮以外，您还可以通过事件来实现更进一步的控制。
react-native-swipeout 可以通过 onOpen、onClose、scroll、sectionSwipe 等事件来实现更丰富的交互。
在下面的示例中，我们通过调用 console.log() 方法在 onOpen、onClose 事件触发时记录日志：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ -------- ---- ------------------------
----- --------------- ------- --------- -
------------------ -
-------------
---------- - -
------------- -
- ----- ------- --- ---------------- --------
- ----- ------- --- ---------------- ------
-
-
-
-------- -
--------------------- ---------
-
--------- -
--------------------- ---------
-
-------- -
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
---------
----- - -------------------------
------ - -------------
------- - --------------
---------------- -------
---------- ------
-
----------- ---------
-----------
-------
--
-
-
------ ------- ----------------结论
在本文中，我们向您介绍了 react-native-swipeout 的基本使用、高级使用以及一些进阶技巧。现在，您可以根据需要在您的项目中使用它，以实现更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/100257