滚动时 React Native Animated 执行动画但闪烁

Question

在我的反应本机应用程序中，我正在尝试对视图的不透明度进行动画处理。\n当我滚动时，我看到动画完成了这项工作，但它\xe2\x80\x99s同时闪烁。我不知道为什么。

\n\n

视频示例： https://cdn.discordapp.com/attachments/102861040538120192/560165613092339734/video.mov

\n\n

这是我制作的代码

\n\n

const Scrollable = () => {\n  const largeHeaderSize = useState({\n    height: 0,\n    y: 0\n  });\n\n  const animatedValueScrollY = new Animated.Value(largeHeaderSize.height);\n  const [scrollY, setScrollY] = useState(0);\n\n  const headerOpacity = animatedValueScrollY.interpolate({\n    inputRange: [0, largeHeaderSize.height],\n    outputRange: [1, 0],\n    extrapolate: "clamp"\n  });\n\n  return (\n    <SafeAreaView>\n      <Animated.View\n        style={{\n        borderBottomWidth:\n          scrollY >= largeHeaderSize.height ? StyleSheet.hairlineWidth : 0\n      }}>\n        <View>\n          <Animated.View style={{ zIndex: 1, opacity: headerOpacity }}>\n            <Text>Title</Text>\n          </Animated.View>\n        </View>\n      </Animated.View>\n      <Animated.ScrollView\n        onScroll={Animated.event(\n          [{ nativeEvent: { contentOffset: { y: animatedValueScrollY } } }],\n          {\n            useNativeDriver: true,\n            listener: event => setScrollY(event.nativeEvent.contentOffset.y)\n          }\n        )}\n        scrollEventThrottle={16}\n        contentInset={{\n          top: 0,\n          bottom: 50\n        }}\n        contentOffset={{\n          y: 0\n        }}\n      />\n    </SafeAreaView>\n  );\n};\n

\n\n

我该如何解决这个问题？

\n

Answer 1

解决方案是使用 useRef 钩子，如下所示：

const animatedValueScrollY = useRef(new Animated.Value(0))

const headerOpacity = animatedValueScrollY.current.interpolate({
   inputRange: [0, largeHeaderSize.height],
   outputRange: [1, 0],
   extrapolate: 'clamp'
});