[英]How to override header title in react navigation 5
In my react native app i have stack navigator and tab navigator like:在我的本机应用程序中,我有堆栈导航器和选项卡导航器,例如:
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>
);
};
Tab navigation:标签导航:
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>
);
};
Screen2屏幕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>
);
};
In short i have stack navigatior, in that i have tab navigator.简而言之,我有堆栈导航器,因为我有标签导航器。 there are 3 tabs,what i want is in my tab 2(Screen2) there is a button when i click that button it should navigate to another page within the same tab.Then the title should be the "ABC" but it still shows "Screen2" under that ABC.
有 3 个选项卡,我想要的是在我的选项卡 2(屏幕 2)中有一个按钮,当我单击该按钮时,它应该导航到同一选项卡中的另一个页面。然后标题应该是“ABC”,但它仍然显示“ Screen2" 在那个 ABC 下。 ie, not overriding the header title?
即,不覆盖 header 标题?
Something like this:
You have to pass showLabel
props to hide the header in your tababrOptions
.您必须通过
showLabel
道具来隐藏 tababrOptions 中的tababrOptions
。
<Tab.Navigator tabBarOptions={{ showIcon: true , showLabel: false,
}}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.