如何在反應導航 5 中覆蓋 header 標題

Question

在我的本機應用程序中，我有堆棧導航器和選項卡導航器，例如：

   const diagnoseNavigation = ({ navigation, language }) => {
   return (
    <Stack.Navigator
        screenOptions={{
            headerStyle: {
                backgroundColor: "#0089d8",
                shadowOpacity: 0
            },
            headerTitleStyle: {
                fontWeight: "bold",
                color: "white",
                textAlign: "center"
            },
            headerLeft: () => (
                .......
            )
        }}
      >
        <Stack.Screen
            name="Diagnose"
            component={tabNav}
            options={({ route, navigation }) => {
                const routeName = getFocusedRouteNameFromRoute(route) ?? "Home";

                switch (routeName) {
                    case "Screen1": {
                        return {
                            headerTitle:"Screen1",
                            headerRight: () => (
                                .......
                            )
                        };
                    }

                    case "Screen2": {
                        return {
                            headerTitle: "Screen2" //want to override this one
                        };
                    }
                    default: {
                        return {
                            headerTitle: "Home"
                        };
                    }
                }
            }}
        />
    </Stack.Navigator>
);
};

標簽導航：

const Tab = createBottomTabNavigator();
const tabNav = () => {
return (
    <Tab.Navigator tabBarOptions={{ showIcon: true }}>
        <Tab.Screen
            name="Screen1"
            component={Screen1Screen}
        />
        <Tab.Screen
            name="Screen2"
            component={Screen2Screen}
        />
        <Tab.Screen
            name="Screen3"
            component={recommendedNavigation}
        />
    </Tab.Navigator>
);
};

屏幕2

 const Screen2Screen = ({ route, language }) => {

 return (
    <Stack.Navigator>
        <Stack.Screen options={{ headerShown: false }} name="A" component={AScreen} />
        <Stack.Screen
            name="B"
            component={BScreen}
            options={() => {
                return {
                    headerTitle: "ABC" //with this one
                };
            }}
        />
    </Stack.Navigator>
);
};

簡而言之，我有堆棧導航器，因為我有標簽導航器。 有 3 個選項卡，我想要的是在我的選項卡 2（屏幕 2）中有一個按鈕，當我單擊該按鈕時，它應該導航到同一選項卡中的另一個頁面。然后標題應該是“ABC”，但它仍然顯示“ Screen2" 在那個 ABC 下。 即，不覆蓋 header 標題？

 Something like this:

Answer 1

您必須通過showLabel道具來隱藏 tababrOptions 中的tababrOptions 。

   <Tab.Navigator tabBarOptions={{ showIcon: true ,        showLabel: false,
}}>