在 React Native 的应用中，swipe out 组件可以让用户在一项列表中删除或是编辑某个项目。常用的 swipe out 组件有 rn-swipe-out。本文将详细介绍 rn-swipe-out 的使用方法，并附上示例代码。
前置条件
在开始使用 rn-swipe-out 前，需要确保你已经正确配置好了 React Native 开发环境，并安装好了 react、react-native 和 rn-swipe-out 模块。安装方法如下：
npm install react react-native rn-swipe-out
使用方法
在使用 rn-swipe-out 时，我们首先需要导入 Swipeout 组件：
import Swipeout from 'rn-swipe-out';
接着，我们需要在 render 方法中使用 Swipeout 组件，并且将所需的参数按照要求传入。
-- -------------------- ---- -------
---------
--------
-
----- ---------
----- ---------
-------- -- -- ------------------- ------ ---------
-
--
-
------
----------- -- ---- -- -------------
-------
-----------在上述代码中，我们使用 right 参数定义了一个左滑出现的按钮，按钮的属性为 text='Delete'，type='delete'，表示该按钮的颜色为红色，同时设定了一个 onPress 回调函数来完成删除操作。
在 Swipeout 组件内部，我们传入了一个简单的 View 组件表示所要滑动的子项内容。
高级用法
在 rn-swipe-out 中，我们还可以设定多种类型的按钮，比如 Info、Primary、Secondary 等等，分别对应不同的颜色。
另外，我们也可以设置 Swipeout 组件为 disabled 状态，从而保证它不会被用户滑动。
-- -------------------- ---- -------
---------
----------------
----------------------
---------------
--------
-
----- -------
----- -------
-------- -- -- ----------------- ------ ---------
--
-
----- -------
----- -------
-------- -- -- ----------------- ------ ---------
--
-
----- ---------
----- ---------
-------- -- -- ------------------- ------ ---------
-
--
-
------
----------- -- -----------
-------
-----------在上述代码中，我们设定了 autoClose、backgroundColor、disabled 等多种属性，同时我们也定义了多个按钮，分别展示出不同的类型。
结论
在本文中，我们详细介绍了 rn-swipe-out 的使用方法，从最基础的操作到高级用法都一一解释。通过学习 rn-swipe-out，你可以轻松地让你的 React Native 应用拥有 swipe out 的功能，从而为用户带来更好的使用体验。如果你想深入了解 rn-swipe-out 的更多特性和用法，请参照官方文档进行学习。
示例代码详见 https://github.com/danciv/react-native-swipeout。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e981e8991b448d7939