如何动态更改rightButton图像？

问题描述

我需要更改一次topBar的rightButton的图标，然后将其用作切换按钮，以在地图或网格上显示项目。 问题是我的屏幕组件选项是静态的，无法找到重新渲染屏幕的方法。我已经看到有一种将prop传递给静态选项的方法，但是一旦按下按钮，仍然无法重新渲染屏幕以设置其他图标。 关于如何解决这个问题的任何想法？ 谢谢！

我的代码：

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
      },],},});

How the right button should change each time I tap.

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）