更新 setOptions 中的标题选项不起作用

Question

如果

headerTintColor

位置大于 0，我正在尝试更新标题的

scrollY

。我正在使用

react-native-reanimated

来制作动画。但是，我的颜色没有更新。

const header = useSharedValue(false);

const onScroll = useAnimatedScrollHandler((event) => {
  scrollY.value = event.contentOffset.y;
  header.value = event.contentOffset.y > 0;
  console.log(header.value); // correct true and false value here
}, []);

const getHeaderTintColor = useMemo(() => {
  return header.value ? "red" : "blue";
}, [header.value]);

useEffect(() => {
  navigation.setOptions({
    headerTintColor: getHeaderTintColor,
    headerRight: () => (
      <VenueButtons
        sharePress={handleSharePress}
        favouritePress={() => handleFavouritePress()}
        isFavourite={isFavourite}
      />
    ),
  });
}, [loading, navigation, isFavourite, handleFavouritePress, getHeaderTintColor, header]);

Answer 1

使用 onScroll 检测滚动位置。像这样的东西：

const [color, setColor] = useState('black');

useEffect(() => {
  navigation.setOptions({ headerTintColor: color });
}, [navigation, color]);

return (
  <ScrollView
    onScroll={({
      nativeEvent: {
        contentOffset: { y },
      },
    }) => {
      setColor(y > 0 ? 'red' : 'black');
    }}>
...
  </ScrollView>
);