在 React Native 开发中，我们经常会使用一些第三方组件来增强应用的功能和美观性。本文介绍一个常用的 npm 包——golance-react-native-swipeout，用于实现列表项滑动删除和操作按钮的效果。
前置知识
本文假设你已熟悉 React Native 开发，并且已完成安装和配置了 npm。
安装
在项目根目录下使用 npm 安装 golance-react-native-swipeout：
--- ------- ----------------------------- ------
使用方法
在需要使用滑动删除和操作按钮的列表组件中引入 golance-react-native-swipeout：
------ -------- ---- --------------------------------
然后，将需要滑动删除和操作按钮的列表项用 <Swipeout> 包裹起来：
--------- -------- ------ ----- -------- -- -- ---------------------------- --- --------- ------------------ ------------------------ -- -----------
这里的 right 属性为一个数组，包含多个操作按钮（一个按钮对应一个对象），其中 text 为按钮文本，onPress 为按钮点击事件回调。
高级用法
多个滑动方向
除了向右滑动，我们也可以对列表项设置向左滑动的操作按钮。只需要在 <Swipeout> 中添加一个 left 属性即可：
--------- -------- ------ ----- -------- -- -- ---------------------------- -- ------- ------ ------- -------- -- -- -------------------------- --- --------- ------------------ ------------------------ -- -----------
自定义按钮样式
我们可以通过 backgroundColor 属性来设置操作按钮的背景颜色，通过 color 属性来设置文本颜色：
--------- -------- ------ ----- -------- -- -- ---------------------------- ---------------- ------ ------ -------- --- --------- ------------------ ------------------------ -- -----------
操作按钮组
有时我们需要组合多个操作按钮，形成一个组。此时可以使用 component 属性自定义按钮的样式和布局：
----- ---------- - -
----- ------------- -- ----------- --------- --------------- -----------
----- ----------- --------- ------------- --
----- -------------- -------- ---------- -------------
-------
--
----- ------------ - -
----- ------------- -- ----------- --------- --------------- -----------
----- ------------ --------- ------------- --
----- -------------- -------- ---------- -------------
-------
--
--------- --------
----------- ----------- -------- -- -- -------------------------- ---------------- ---------------
----------- ------------- -------- -- -- ---------------------------- ---------------- -------
---
--------- ------------------ ------------------------ --
-----------事件回调
onOpen 和 onClose 事件分别在滑动打开和关闭时触发，可以用来实现自定义动画效果等：
--------- -------- ------ ----- -------- -- -- ---------------------------- -- ---------- -- -------------------- ----------- -- ---------------------- --------- ------------------ ------------------------ -- -----------
示例代码
使用虚拟列表组件 FlatList，实现滑动删除和标记操作：
------ ------ ----------- ---- --------
------ ---------- ----------- ----- ----------------- ----- ---- ---------------
------ -------- ---- --------------------------------
------ ---- ---- ----------------------------------------
----- ---- - -
---- ---- ------ ------- --------- ---------
---- ---- ------ ------- --------- -- -------
---- ---- ------ ------- --------- -- -------
---- ---- ------ ------- --------- ---------
--
------ ------- ----- --- ------- --------- -
------------- - -- -- -
----- ------- - ---------------- -- ------- --- ----
-------------------- ----------
--
----------- - -- -- -
----- ------- - ------------- -- -
-- -------- --- --- -
------------- - ------
-
------ -----
---
-------------------- ----------
--
----------- - -------- -- -
--------- --------
------ ----- -------- -- -- ---------------------------- ---------------- ------ ------ ---------
-- -------
----------- ----------------- ------------------------- ----------- -- ---------------------------
----- ----------- --------- ------------- --
----- -------------- -------- ---------- -------------
-------------------- ---------------- ---------------
-- ---------- -- -------------------- ----------- -- ----------------------
----- --------------------
----- ----------------------------------------
----- ----------------------------------------------
-------
-----------
--
-------- -
------ -
--------- ----------- ----------------------------- ------------------ -- -------- --
--
-
-
----- ------ - -------------------
----- -
----- --
------- ---
------------------ --
------------------ ----------
--------------- ---------
------------ ---
--
------ -
--------- ---
----------- -------
--
--------- -
--------- ---
------ -------
---------- --
--
----------- -
----- --
----------- ---------
--------------- ---------
--
---以上即为 golance-react-native-swipeout 的使用教程。希望对你的 React Native 开发工作有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ada81e8991b448d8779