如何在 React-Native React Navigation 5 中向下滚动时制作从透明到不透明颜色的动画标题？

Question

我正在尝试制作标题，在使用 React-Native React Navigation 5向下滚动时，该标题将从透明变为纯不透明颜色。

滚动到一半时开始过渡到不透明

---

达到最大偏移量时变得完全不透明

Answer 1

您可以通过将标题样式不透明度设置为动画值来实现此目的。

首先定义您的动画值，我们将插入 yOffset 以获得所需的不透明度。

const yOffset = useRef(new Animated.Value(0)).current;
const headerOpacity = yOffset.interpolate({
  inputRange: [0, 200],
  outputRange: [0, 1],
  extrapolate: "clamp",
});

那么你想将一个动画事件监听器附加到一个动画滚动视图

<Animated.ScrollView
  onScroll={Animated.event(
    [
      {
        nativeEvent: {
          contentOffset: {
            y: yOffset,
          },
        },
      },
    ],
    { useNativeDriver: true }
  )}
  scrollEventThrottle={16}
>

您的内容应该在滚动视图内

在您的屏幕中添加一个 on mount 或 use 效果，您可以在其中将 animationValue 设置为标题不透明度

useEffect(() => {
  navigation.setOptions({
    headerStyle: {
      opacity: headerOpacity,
    },
    headerBackground: () => (
      <Animated.View
        style={{
          backgroundColor: "white",
          ...StyleSheet.absoluteFillObject,
          opacity: headerOpacity,
        }}
      />
    ),
    headerTransparent: true,
  });
}, [headerOpacity, navigation]);

我使用了标题透明和标题背景，以便背景组件也发生变化。

下面是一个例子：

https://snack.expo.io/@dannyhw/react-navigation-animated-header