如何动态更改右按钮图像？

Question

我需要在按下 topBar 的 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
      },
    ],
  },
});

How the right button should change each time I tap.

Answer 1

一段时间后，我使用 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,
        },
      ],
    },
  });
  }
...

如何动态更改右按钮图像？

How to change rightButton image dynamically?

react-native

wix-react-native-navigation