React Navigation - 在子组件中监听父动作

Question

我有一个选项卡导航器屏幕，其中有 2 个选项卡。 父堆栈在 header 中有按钮，它应该以不同的方式工作 w.r.t 两个不同的屏幕/选项卡。

现在，我所做的是 -

navigation.setOptions({
  headerRight: () => (
    <TouchableOpacity>
      <Text>Update</Text>
    </TouchableOpacity>
  ),
});

我如何处理 Tabs Navigator 下两个组件的Save按钮的单击？

注意- 我正在使用react-navigation@v6

Answer 1

在这里，我想自己给出我的问题的答案。

解决方案是不从父导航器设置导航右按钮，从每个选项卡屏幕访问父导航并设置右 header。

您还应该使用useFocusEffect添加它，因为它对于导航器的不同选项卡可能不同。 这是你如何做到的 -

import { useFocusEffect } from '@react-navigation/native';

useFocusEffect(() => {
    navigation.getParent().setOptions({
      headerRight: () => (
        <TouchableOpacity 
          disabled={true}
          style={styles.headerRight}>
          <Text style={{ color: 'black' }}>Save</Text>
        </TouchableOpacity>
      ),
    });
});