如何在React Native中的renderItem函数中获取FlatList元素的高度

Question

我是React Native的新手。我想制作向左滑动的FlatList项目的删除动画。我获得了滑动的值，并能够删除该项目，但它并不流畅。

因此，我使用的是React Native的Animated API，并希望在滑动后1000毫秒内将FlatList项目的高度设为0。

我正在使用inputRange和outputRange。但是我无法获取当前元素的高度，因为所有元素的高度都是动态的。

Answer 1

您可以使用onLayout属性获取视图的高度。

<View onLayout={(event) => {
  const {x, y, width, height} = event.nativeEvent.layout;
  // do something here like set your initial animated value for the height
}} />

https://facebook.github.io/react-native/docs/view#onlayout

动画高度不是最好的方法，因为高度动画效果不佳。您可能希望对转换进行动画处理，并对视图的垂直比例进行动画处理。

如果您可以将本机驱动程序用于动画，那么它们将表现出色 https://facebook.github.io/react-native/docs/animations#using-the-native-driver

  

目前，不是所有您可以使用Animated进行的操作都支持   本机驱动程序。主要限制是您只能设置动画   非布局属性：诸如transform和opacity之类的东西将起作用   但是flexbox和position属性不会。

这个SO答案很好地说明了如何执行变换动画https://stackoverflow.com/a/45634834/5508175

我个人的方法是淡出视图的内容，然后将视图的垂直比例动画化为零。