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

Question

我是 React Native 的新手。我想在向左滑动时为 FlatList 项的删除设置动画。我正在获取滑动值并能够删除该项目，但它并不流畅。

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

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

Answer 1

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

<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

动画高度不是最好的方法，因为高度动画的性能不佳。您可能希望为变换设置动画，并为 View 的垂直比例设置动画。

如果您可以使用 Native 驱动程序进行动画处理，那么它们的性能会非常好 https://facebook.github.io/react-native/docs/animations#using-the-native-driver

Not everything you can do with Animated is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like transform and opacity will work, but flexbox and position properties will not.

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

我个人的做法是淡出 View 的内容，然后将 View 的垂直比例设置为零。