React-Navigation：如何实现头部图标的点击自更新？

你遇到的问题核心是：navigation.setOptions()只在组件首次渲染时执行了一次，后续enabled状态变化后，没有重新调用setOptions()来更新headerRight里的内容，导致箭头函数捕获的还是旧的enabled值，图标自然不会切换。

给你两种靠谱的解决方式：

方式一：用useEffect监听状态变化，动态更新headerOptions #

通过useEffect监听enabled的变化，每次状态改变时重新调用setOptions()，确保headerRight里的箭头函数能拿到最新的enabled值：

import { useState, useEffect } from 'react';
import { TouchableOpacity } from 'react-native';
import { HeartFill, HeartOutline } from '@your-icon-library'; // 替换成你的图标库

// 页面组件内
const [enabled, setEnabled] = useState(false);

useEffect(() => {
  navigation.setOptions({
    headerRight: () => (
      <TouchableOpacity onPress={() => setEnabled(prev => !prev)}>
        {enabled ? <HeartFill /> : <HeartOutline />}
      </TouchableOpacity>
    )
  });
}, [enabled, navigation]); // 依赖项里加上enabled和navigation，确保状态变化时触发更新

方式二：把headerRight抽成独立组件，内部管理状态 #

直接把爱心按钮做成一个独立组件，让它自己维护enabled状态，这样只需要在页面初始化时设置一次headerRight，组件内部状态变化会自动重新渲染：

import { useState } from 'react';
import { TouchableOpacity } from 'react-native';
import { HeartFill, HeartOutline } from '@your-icon-library';

// 独立的爱心按钮组件
const HeartHeaderButton = () => {
  const [enabled, setEnabled] = useState(false);

  return (
    <TouchableOpacity onPress={() => setEnabled(prev => !prev)}>
      {enabled ? <HeartFill /> : <HeartOutline />}
    </TouchableOpacity>
  );
};

// 页面组件内
navigation.setOptions({
  headerRight: () => <HeartHeaderButton />
});

这两种方式都能避免你说的「切换多状态陷入无限嵌套」的问题：第一种只会在enabled变化时更新options，不会重复触发；第二种完全不需要再调用setOptions()，组件自己处理状态更新，逻辑更清晰。

内容的提问来源于stack exchange，提问作者Kipnoedels