如何更新 React Native 标题按钮

Question

我有一个屏幕，可以获取 isFavourite 的数据，该数据存储在

useState

中。屏幕有两个按钮，其中之一是“喜欢”/“收藏”按钮。我正在尝试根据 isFavourite 的状态更新“喜欢/最喜欢”按钮的颜色。我正在关注医生的here。但是，我的按钮似乎不起作用。即函数不将任何内容记录到控制台。

这是我的屏幕代码；

export default function VenueScreen({ navigation, route }) {
  
  const [isFavourite, setIsFavourite] = useState(false);
  
  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <VenueHeaderButtons
          isFavourite={isFavourite}
          handleFavouritePress={() => handleFavoritePress(isFavourite)}
        />
      ),
    });
  }, [navigation, isFavourite, handleFavoritePress]);

  const handleFavoritePress = () => {
    console.log("NOT LOGGING ANYTHING HERE???")
    setIsFavourite((prev) => !prev);
  };
}

这是我的 VenueButton 代码；

function VenueHeaderButtons({ isFavourite, handleFavouritePress }) {
const heartColor = useMemo(() => {
    return isFavourite ? "red" : textColor;
  }, [isFavourite, textColor]);

  return (
    <View style={containerStyle}>
      <Pressable
        style={buttonStyle}
        onPress={handleFavouritePress}>
        <TouchableOpacity activeOpacity={0.5}>
          <MaterialCommunityIcons
            name="heart-outline"
            size={25}
            color={heartColor}
          />
        </TouchableOpacity>
      </Pressable>
    </View>
  );
}

Answer 1

尝试这样：

function VenueHeaderButtons({ isFavourite, handleFavouritePress }) {
const heartColor = useMemo(() => {
    return isFavourite ? "red" : textColor;
  }, [isFavourite, textColor]);

  return (
    <View style={containerStyle}>
        <TouchableOpacity activeOpacity={0.5} onPress={handleFavouritePress}>
          <MaterialCommunityIcons
            name="heart-outline"
            size={25}
            color={heartColor}
          />
        </TouchableOpacity>
    </View>
  );
}