React Navigation - 在 child 组件中收听 parent 操作

Question

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

现在，我所做的是-

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

如何处理选项卡导航器下两个组件的 Save 按钮点击？

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

Answer 1

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

解决方案是不从 Parent 导航器设置导航右键，从每个选项卡屏幕访问 parent 导航并设置右侧 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>
      ),
    });
});

React Navigation - 在 child 组件中收听 parent 操作

React Navigation - Listen parent action in child component

javascript

navigation

react-native

react-navigation