介绍
React Native Swipeable View 是一个 React Native 组件库，提供支持左右滑动删除等手势功能的视图组件。它允许您通过滑动手势来执行特定操作，例如删除、标记等。
安装
安装 React Native Swipeable View 很简单，只需要在终端中运行以下 npm 命令：
npm install react-native-swipeable-view --save
使用
在你的 React Native 项目中，你需要先导入 SwipeableListView 组件，然后再使用它。例如，你可以像下面这样使用 SwipeableListView 组件：
import SwipeableListView from 'react-native-swipeable-view';
<SwipeableListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
renderQuickActions={(rowData) => this.renderQuickActions(rowData)} />在 renderQuickActions 中定义滑动手势操作区域，当用户在行上向左或向右滑动时，该操作区域就会出现。你可以在操作区域中定义你想要的操作按钮。
-- -------------------- ---- -------
--------------------------- -
------ -
----- -----------------------
-----------------
---------------------------- -------------------------
----------- -- ------------------------
----- --------------------------------------
-------------------
-----------------
---------------------------- --------------------------
----------- -- --------------------------
----- --------------------------------------
-------------------
-------
--
-在上面的代码中，我们定义了两个操作按钮：一个是“编辑”，另一个是“删除”。使用 TouchableOpacity 方式定义的操作按钮，可以让用户在点击这些按钮时获得更好的感受。这里有一个完整的例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -
-----
-----
---------
-----------
-----------------
-----
- ---- ---------------
------ ----------------- ---- ------------------------------
----- ------ - -------------------
---------- -
----- --
---------------- ----------
----------- --
--
------------- -
-------------- ------
--------------- ----------------
----------- ---------
------------------ --
------------------ ----------
-------- --
--
-------- -
--------- --
--
-------- -
----------- ---------
---------------- -------
----- --
-------------- ------
--------------- -----------
------------ --
--
------------- -
----------- ---------
------- --
--------------- ---------
--------- -----------
---- --
------ --
--
----------------- -
---------------- -------
------ --
--
------------------ -
---------------- ------
------ -
--
-------------- -
------ ------
-
---
------ ------- ----- ------------------------ ------- --------- -
------------------ -
-------------
----- -- - --- --------------------- -------------- ---- --- -- -- --- -- ---
---------- - -
----------- ------------------
----- ---
----- ---
----- ---
----- ---
----- ---
----- ---
----- ---
----- ---
----- ---
----- ---
--
--
-
------------------- -
--------------------- ------- - - ---- -- ----------
-
----------------- -
------------------- ------- - - ---- -- ---------
-
------------------ -
------ -
----- ----------------------------
----- ---------------------------------------
-------
--
-
--------------------------- -
------ -
----- -----------------------
-----------------
---------------------------- -------------------------
----------- -- ------------------------
----- --------------------------------------
-------------------
-----------------
---------------------------- --------------------------
----------- -- --------------------------
----- --------------------------------------
-------------------
-------
--
-
-------- -
------ -
----- -------------------------
------------------
----------------------------------
--------------------------
----------------------------- -- --------------------------------- --
-------
--
-
-运行该代码后，你应该在手机上看到一个类似邮件应用的界面。你可以向左或向右滑动任何一行，以查看操作按钮。
总结
React Native Swipeable View 是一个非常有用的 React Native 组件库，它允许您为您的应用程序添加简单的滑动手势操作。通过学习如何使用该组件库，您可以为您的 React Native 应用程序提供更多功能和更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005661181e8991b448e1f36