移动端侧滑删除的演进
在移动端开发中,侧滑删除是一个高频交互需求。早期实现往往依赖第三方库,配置繁琐且兼容性参差不齐。随着 React Native 生态的成熟,基于 FlatList 封装的侧滑组件逐渐成为主流方案,大大降低了开发成本。
SwipeableFlatList 核心属性
该组件兼容 FlatList 的所有标准属性,并额外提供了三个关键配置项,用于精细控制侧滑行为:
- bounceFirstRowOnMount: Boolean 类型,默认为 true。控制列表初始化时是否对首行执行弹跳动画,体验更自然。
- maxSwipeDistance: Number 或 Function,必须赋值。定义左侧滑动允许的最大像素距离,超出后自动回弹。
- renderRightActions: Function,必需。返回一个包含操作按钮(如删除、编辑)的视图组件,决定侧滑后显示的内容。
代码实战
下面是一个基础的使用示例,展示了如何结合 FlatList 渲染列表并启用侧滑菜单。
import { View, Text, FlatList } from 'react-native';
// 假设已安装相关手势库
import Swipeable from 'react-native-gesture-handler';
const MyList = () => {
const renderItem = ({ item }) => (
<View style={styles.item}>
<Text>{item.title}</Text>
</View>
);
return (
<SwipeableFlatList
data={data}
renderItem={renderItem}
keyExtractor={item => item.id}
bounceFirstRowOnMount={false}
maxSwipeDistance={100}
renderRightActions={() => (
<View =>
删除
)}
/>
);
};

