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