React Native 是一种跨平台的移动应用开发框架，它通过使用 JavaScript 和基于 React 的组件来创建本地 iOS 和 Android 应用程序。在实际开发中，我们经常需要在列表中实现左右滑动删除的功能。本文将介绍如何使用 React Native 实现这一功能。
实现思路
实现左右滑动删除的基本思路是在列表视图中为每个单元格添加一个滑动手势，当用户在单元格上滑动时，相应的单元格将呈现出删除按钮，用户可以点击该按钮来删除单元格。在 React Native 中，可以通过 PanResponder 来监听手势事件并实现滑动效果。以下是具体实现步骤：
- 在列表单元格中添加一个带有删除按钮的容器。在未滑动时，该容器应该处于原始位置，当用户向左滑动时，容器应该向左移动，直到呈现出删除按钮。
- 监听视图中的滑动手势，并根据手势的移动距离从而改变容器的位置。
- 当手指离开屏幕时，如果容器已经移动足够远（超过一定阈值），则视为用户想删除该单元格，需要调用相应的删除方法移除该单元格。
手动实现
下面是一个简单的手动实现示例代码：
// javascriptcn.com 代码示例
import React, { useState } from 'react';
import { View, Text, StyleSheet, PanResponder, Animated } from 'react-native';
const SwipeDelete = ({ data, onDelete }) => {
const [panResponder, setPanResponder] = useState(null);
const [translateX, setTranslateX] = useState(new Animated.Value(0));
const handlePanResponderMove = (evt, gestureState) => {
if (gestureState.dx < 0) {
setTranslateX(new Animated.Value(Math.max(gestureState.dx, -70)));
}
};
const handlePanResponderRelease = (evt, gestureState) => {
if (gestureState.dx < -50) {
Animated.timing(translateX, {
toValue: -70,
duration: 200,
useNativeDriver: true
}).start(() => {
onDelete(data.id);
});
} else {
Animated.timing(translateX, {
toValue: 0,
duration: 200,
useNativeDriver: true
}).start();
}
};
const panResponderConfig = {
onMoveShouldSetPanResponder: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderMove: handlePanResponderMove,
onPanResponderRelease: handlePanResponderRelease,
onPanResponderTerminate: handlePanResponderRelease,
};
React.useEffect(() => {
setPanResponder(PanResponder.create(panResponderConfig));
}, []);
return (
<View style={styles.container}>
<Animated.View
style={[
{ transform: [{ translateX: translateX }] },
styles.swipeToDeleteContainer,
]}
{...panResponder?.panHandlers}
>
<View style={styles.deleteButton}>
<Text style={styles.deleteButtonText}>删除</Text>
</View>
<Text>{data.text}</Text>
</Animated.View>
</View>
);
};
const styles = StyleSheet.create({
container: {
padding: 5,
},
swipeToDeleteContainer: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#f9c2ff',
borderRadius: 5,
padding: 5,
},
deleteButton: {
backgroundColor: 'red',
borderRadius: 5,
padding: 10,
},
deleteButtonText: {
color: '#fff',
}
});
export default SwipeDelete;在上述代码示例中，我们使用了一个基于 hook 的函数组件 SwipeDelete 来实现单元格滑动删除的功能。SwipeDelete 组件接收了两个 props：data 和 onDelete。其中，data 是一个包含 id 和 text 属性的对象，onDelete 是一个函数，用于在用户确认删除单元格后将其从列表中移除。
在组件内部，我们使用了 useState hook 来定义并使用了两个状态：panResponder 和 translateX。translateX 是一个使用了 Animated 库中的 Value 类型的动画值，用于控制容器的位置。panResponder 是一个响应滑动手势事件的 PanResponder 对象。
在 useEffect 钩子函数中，我们调用了 PanResponder.create 方法来创建一个 PanResponder 对象，并将其保存为状态 panResponder。我们将该对象的 panHandlers 属性添加到了 swipeToDeleteContainer 容器中，从而使该容器可以响应滑动手势事件。
定义了 PanResponder 和 Animated.Value 后，我们在 handlePanResponderMove 回调函数中监听手势事件，根据手势的移动距离更新 translateX 动画值，从而设置 swipeToDeleteContainer 容器的位置。在 handlePanResponderRelease 回调函数中，我们判断容器的位置是否超出删除阈值，如果超出，则使用 Animated 库中的 timing 方法将 translateX 动画值的值设置为 -70，目的是让 swipeToDeleteContainer 容器实现向左滑动的效果，同时在动画完成后调用 onDelete 函数，从列表中移除对应的单元格。如果当前容器的位置没有超出删除阈值，则使用相同的 timing 方法将 translateX 动画值的值设置为 0，从而让 swipeToDeleteContainer 容器回到原始位置。
使用插件
手动实现左右滑动删除功能的代码较为复杂，此外还需要涉及到手势检测、动画等底层知识点。如果我们不希望手动实现这一功能，也可使用一些已有的 React Native 插件来简化开发过程。以下是两个常用的插件：
- react-native-swipeout：一个流行的 React Native 左滑删除组件，支持 Android 和 iOS，可以方便地在列表单元格中添加左右滑动删除按钮。
- react-native-swipe-list-view：一个具有更多可定制选项的 React Native 左右滑动删除组件，支持多种左右滑动效果和修饰符。
在使用这些插件的过程中，我们只需要安装并引入相应的包，根据官方文档编写代码，即可快速实现左右滑动删除功能。
总结
本文介绍了在 React Native 中实现列表单元格的左右滑动删除功能的基本思路和手动实现方法，并简要介绍了两个常用的 React Native 插件。在实际开发中，我们可以根据实际项目需要选择适合自己的实现方式，快速实现左右滑动删除功能，提高应用程序的用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65461e2f7d4982a6ebfe87d1