SwipeableFlatList侧滑,做完相关操作后怎么让它关闭?
来源:3-5 高性能列表组件SwipeableFlatList精讲

谜团52
2018-06-21
现在操作删除后,即便执行this.setState,打开的侧滑列表也没有关闭。
事件:
genQuickActions = (rowData) => {
return(
<View style={styles.action}>
<TouchableHighlight onPress={() => this._delItem(rowData)} >
<View style={styles.quick}>
<Text style={styles.del}>删除</Text>
</View>
</TouchableHighlight>
</View>
)
};
_delItem = (rowData) => {
let {data} = this.state;
data.splice(data.findIndex(item => item.id === rowData.item.id), 1);
this.setState({data: data})
};
渲染:
render() {
const {loading, data} = this.state;
//列表header - 下拉刷新
const refreshControl = (
<RefreshControl
title={"Loading..."}
tintColor="#ff0000"
titleColor="#ff0000"
colors={['#ff0000', '#00ff00', '#0000ff']}
refreshing={loading}
onRefresh={this.loadData}
/>
);
//列表footer - 上拉刷新
const listFooter = (
<View style={styles.footer}>
<ActivityIndicator animating={true} size={'large'} color={'red'} />
<Text style={styles.indicator}>正在加载更多...</Text>
</View>
);
return (
<View style={styles.list}>
<SwipeableFlatList
data={data}
renderItem={this._renderItem}
keyExtractor={this._keyExtractor}
refreshControl={refreshControl}
ListFooterComponent={listFooter}
onEndReached={this.loadMoreData}
onEndReachedThreshold={0.5}
renderQuickActions={(rowData) => this.genQuickActions(rowData)}
maxSwipeDistance={100}
bounceFirstRowOnMount={false}
/>
</View>
);
}
删除前:删除第二条数据
删除后:第二行还是打开的
1回答
-
CrazyCodeBoy
2018-06-22
1. SwipeableFlatList还没提供关闭功能;
2. 可以使用https://github.com/gitboss2000/react-native-swipeable-flat-list试一下;
00
相似问题