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>
 );
}

删除前:删除第二条数据

http://img.mukewang.com/szimg/5b2b6e520001ecbc08941738.jpg


删除后:第二行还是打开的

http://img.mukewang.com/szimg/5b2b6e660001f06808941738.jpg

写回答

1回答

CrazyCodeBoy

2018-06-22

1. SwipeableFlatList还没提供关闭功能;

2. 可以使用https://github.com/gitboss2000/react-native-swipeable-flat-list试一下;

0
0

React Native技术精讲与高质量上线App开发

一个真实的上线项目,一次完整的开发过程,全面掌握React Native技术

1577 学习 · 727 问题

查看课程