动画FlatList Grid用于删除功能

时间:2017-08-27 22:35:11

标签: react-native react-native-flatlist

如果我有一个列FlatListLayoutAnimation可以通过平滑地滑动到已删除项目的位置来正确地动画从列表中删除元素。

如果我设置FlatList道具numColumns={2}(或更高版本)来制作项目网格,则从列表中删除项目不再通过缓动正确动画。现在删除项目时,网格中的项目在淡出后淡出,然后淡入,所选项目现在消失。

如何正确制作多列FlatList动画删除?先谢谢!

 renderItem({item,index}) {
      return  (
          <ListItem
            item={item}
            index={index}
            deleteTerm={() => this.deleteItem(index)}
            search={() => this.onSearch(item)}
            />
      )
  }

  deleteItem(index) {
      LayoutAnimation.easeInEaseOut();
      this.props.actions({type:'DELETE_TERM', payload: index});
  }

  render () {
    return (
      <ScrollView style={styles.container}
        keyboardDismissMode={'on-drag'}
        keyboardShouldPersistTaps={'always'}
        >
          <FlatList
              keyboardShouldPersistTaps={'always'}
              data={this.props.searchHistory}
              renderItem={this.renderItem.bind(this)}
              numColumns={2}
              keyExtractor={(item) => item}
          />
      </ScrollView>
    )
  }

0 个答案:

没有答案