Question

我需要更改一次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.

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

如何动态更改rightButton图像？

1 个答案: