如何将动画值传递到导航标头组件

Question

在我的一个屏幕中，我有一个ScrollView，当我滚动时，它会为导航标题设置动画。在我的屏幕文件中我有这样的东西。

const translationY = new Value(0);
const headeropacity = interpolate(translationY, {
inputRange: [0, 300, 500],
outputRange: [0, 1, 1],
extrapolate: Extrapolate.CLAMP
});
/* I need to pass to the navigation header */
React.useEffect(() => {
navigation.setParams({
opacity: headerOpacity,
});
}, [navigation, headerOpacity]);

在我的自定义头文件中

const opacity = scene.route.params.opacity;
return (
<MyCustomHeader style={{opacity}} />
)

我以为(？(我错了。

超过了最大更新深度。当组件调用useEffect中的setState，但useEffect没有依赖数组，或每个渲染上的一个依赖项更改

如何将动画值正确传递到其他屏幕(页面(？

Answer 1

在传递参数之前，您需要检查translationY是否未定义。

因此，在正常情况下，您将以这种方式检查翻译Y：

if (!translationY) {
navigation.setParams({ translationY });
}

你在标题组件上处理动画值，没有尝试直接传递动画不透明度，所以我不能确认，但这适用于传递动画值