根据视图在scrollview中的位置设置不透明度

Question

我正在使用react-native-swiper组件允许用户在不同的列表视图之间水平滑动。我想为这些列表视图的不透明度设置动画，以便它们在屏幕中心时处于完全不透明状态，并在向左或向右滑动时淡出。我试图使用父scrollview（swiper组件）的onScroll事件，然后在listview组件上使用RCTUIManager来获取它们在屏幕上的当前位置：

var handle = React.findNodeHandle(this.refs['list']);
RCTUIManager.measure(handle, (x, y, width, height, pageX, pageY)

但结果动画确实非常不稳定，我猜这是因为它使用onScroll事件来更新不透明度值。

实现这一目标的最佳方法是什么？

Answer 1

可能不再相关，因为这是一个老问题，但现在您可以在scrollView上使用useNativeDriver: true并根据滚动事件设置不透明度的动画效果。

this blog post explains it really well