React native 如何动态更改rightButton图像？

我需要改变一个图标的顶部栏的右键一旦按下，并使用它作为切换，以显示地图或网格上的项目。 问题是我的屏幕组件选项是静态的，无法找到重新渲染屏幕的方法。我已经看到有一种方法可以将道具传递给静态选项，但仍然无法在按下按钮后重新渲染屏幕以设置不同的图标。 有没有办法解决这个问题？ 谢谢大家!

我的代码：

const ResultsScreen = ({ componentId }) => {
  const [isMapActive, setIsMapActive] = useState(false);
  const [items, setItems] = useState([]);

  useNavigationButtonPress((event) => {
    if(event.buttonId == 'toggleMapGrid') {
      setIsMapActive(!isMapActive);
    }
  });

  const ResultsSection = isMapActive ? (
    // TODO: Temporary no-map
    <View style={{ backgroundColor: 'red', flex: 1 }} />
  ) : (
    <ItemsGrid parentComponentId={componentId} items={items} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FilterList style={styles.filters} />
      {ResultsSection}
    </SafeAreaView>
  );
};

ResultsScreen.options = () => ({
  topBar: {
    animate: true,
    rightButtons: [
      {
        id: 'toggleMapGrid',
        icon: R.images.location24, // or R.images.map24, depending on isMapActive
      },
    ],
  },
});

constresultsscreen=（{componentId}）=>{
常量[isMapActive，setIsMapActive]=useState（false）；
const[items，setItems]=useState（[]）；
UseNavigationButtonPross（（事件）=>{
如果（event.buttonId==“toggleMapGrid”）{
setismpative（！ismpative）；
}
});
const ResultsSection=isMapActive(
//TODO:暂时没有地图
) : (
);
返回(
{ResultsSection}
);
};
ResultsScreen.options=（）=>({
顶栏：{
动画：对，
右键按钮：[
{
id:“toggleMapGrid”，
图标：R.images.location24、//或R.images.map24，具体取决于isMapActive
},
],
},
});

---

过了一段时间，我使用

mergeOptions

API解决了这个问题

const ResultsScreen = () => {
...
  const [isMapActive, setIsMapActive] = useState(false);

  Navigation.mergeOptions(componentId, {
    topBar: {
      rightButtons: [
        {
          id: 'advancedFilters',
          icon: R.images.filter24,
        },
        {
          id: 'toggleMapGrid',
          icon: isMapActive ? R.images.list24 : R.images.location24,
        },
      ],
    },
  });
  }
...

---

我不是给这个问题的答案，而是一个报价，顶部栏-底部标签等等。。。就是一些组件，你们为什么不为顶部的工具栏创建你们自己的组件，然后你们就有了所有你们需要的控件