如何将屏幕标题放在每个屏幕的标题中

Question

我需要一只手来理解应用程序上屏幕的行为。

我只是注意到，无论我在浏览什么屏幕，标题顶部的屏幕标题总是"；订单"；。当然，我希望每个标题都显示屏幕标题，所以我认为导航文件中缺少一些信息。

然而，我真的不知道在哪里或如何在标题中添加屏幕标题。但是，我把屏幕的名称/标题放在每个堆栈中。屏幕

你能引导我，帮助我，并向我解释我的错误在哪里吗？谢谢你阅读我的文章。

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const screenOptionStyle = {
headerStyle: {
backgroundColor: "#F78400",
},
headerTintColor: "white",
headerBackTitle: "Back",
backgroundColor:'#f7f6f6'
};

export const MainStackNavigator = () => {
return (
<Stack.Navigator screenOptions={screenOptionStyle}>      
<Stack.Screen name = 'Orders' component = {BottomTabNavigator} options={{ title: i18n.t("orders.title") }}/> 
<Stack.Screen name = 'Authentication' component = {Authentication} options={{title: i18n.t("authentication.title"), headerShown: false }}/>
<Stack.Screen name = 'Account' component = {Account} options={{ title: i18n.t("account.title") }}/>
<Stack.Screen name = 'Activities' component = {Activities} options={{ title: i18n.t("activities.title") }}/> 
<Stack.Screen name = 'Contact' component = {Contact} options={{ title: i18n.t("contact.title") }}/> 
<Stack.Screen name = 'Login' component = {Login} options={{ title: i18n.t("login.title"), headerShown: false }}/>
<Stack.Screen name = 'Register' component = {Register} options={{ title: i18n.t("register.title"), headerShown: false }}/>
<Stack.Screen name = 'Reset' component = {Reset} options={{ title: i18n.t("reset.title") }}/>
<Stack.Screen name = 'Tools' component = {Tools} options={{ title: i18n.t("tools.title") }}/>
<Stack.Screen name = 'Scan' component = {Scan} options={{ title: i18n.t("scan.title") }}/>      
<Stack.Screen name = 'Current' component = {Current} options={{ title: i18n.t("current.title") }}/>
<Stack.Screen name = 'Completed' component = {Completed} options={{ title: i18n.t("completed.title") }}/>
<Stack.Screen name = 'Products' component = {Products} options={{ title: i18n.t("products.title") }}/>
<Stack.Screen name = 'ProductDetails' component = {ProductDetails} options={{ title: i18n.t("fiche.title") }}/>
<Stack.Screen name = 'Information' component = {Information} options={{ title: i18n.t("information.title") }}/>
<Stack.Screen name = 'Photos' component = {Photos} options={{ title: i18n.t("photos.title") }}/>
<Stack.Screen name = 'Stock' component = {Stock} options={{ title: i18n.t("stock.title") }}/>
<Stack.Screen name = 'Terms' component = {Terms} options={{ title: i18n.t("terms.title") }}/> 
<Stack.Screen name = 'About' component = {About} options={{ title: i18n.t("about.title") }}/>      
<Stack.Screen name = 'Tickets' component = {Tickets} options={{ title: i18n.t("tickets.title") }}/>
<Stack.Screen name = 'Dashboard' component = {Dashboard} options={{ title: i18n.t("dashboard.title") }}/>
<Stack.Screen name = 'Settings' component = {Settings} options={{ title: i18n.t("settings.title") }}/>
<Stack.Screen name = 'Welcome' component = {Welcome} options={{ title: i18n.t("welcome.title") }}/>
<Stack.Screen name = 'BottomTabNavigator' component = {BottomTabNavigator} options={{ title: i18n.t("welcome.title") }}/>
</Stack.Navigator>
);
}
export const BottomTabNavigator = () => {
return (
<Tab.Navigator tabBarOptions={{
activeTintColor: 'black',
labelStyle: {fontSize: 12, color: 'white'}, 
style: {backgroundColor: '#F78400'},
}}>      
<Tab.Screen
name={i18n.t("orders.title")}
component={Orders}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("../assets/images/orders.png")}
style={styles.icon}
/>
);
}
}}
/>
<Tab.Screen
name={i18n.t("dashboard.title")}
component={Dashboard}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("../assets/images/dashboard.png")}
style={styles.icon}
/>
);
}
}}
/>
<Tab.Screen
name={i18n.t("tools.title")}
component={Tools}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("../assets/images/tools.png")}
style={styles.icon}
/>
);
}
}}
/>
<Tab.Screen
name={i18n.t("settings.title")}
component={Settings}
options={{
tabBarIcon: ({ focused, horizontal, tintColor }) => {
return (
<Image
source={require("../assets/images/settings.png")}
style={styles.icon}
/>
);
}
}}
/>
</Tab.Navigator>
);
};

Answer 1

因为您已经在堆栈屏幕中嵌套了BottomTabNavigation。堆栈屏幕的标题将始终相同。

import {getFocusedRouteNameFromRoute} from '@react-navigation/native';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const screenOptionStyle = {
headerStyle: {
backgroundColor: '#F78400',
},
headerTintColor: 'white',
headerBackTitle: 'Back',
backgroundColor: '#f7f6f6',
};
function getHeaderTitle(route) {
const routeName = getFocusedRouteNameFromRoute(route) ?? 'OrdersTab';
switch (routeName) {
case 'OrdersTab':
return i18n.t('orders.title');
case 'DashboardTab':
return i18n.t('dashboard.title');
case 'ToolsTab':
return i18n.t('tools.title');
case 'SettingsTab':
return i18n.t('settings.title');
}
}
export const MainStackNavigator = () => {
return (
<Stack.Navigator screenOptions={screenOptionStyle}>
<Stack.Screen
name="Orders"
component={BottomTabNavigator}
options={({route}) => ({
headerTitle: getHeaderTitle(route),
})}
/>
<Stack.Screen
name="Authentication"
component={Authentication}
options={{title: i18n.t('authentication.title'), headerShown: false}}
/>
<Stack.Screen
name="Account"
component={Account}
options={{title: i18n.t('account.title')}}
/>
<Stack.Screen
name="Activities"
component={Activities}
options={{title: i18n.t('activities.title')}}
/>
<Stack.Screen
name="Contact"
component={Contact}
options={{title: i18n.t('contact.title')}}
/>
<Stack.Screen
name="Login"
component={Login}
options={{title: i18n.t('login.title'), headerShown: false}}
/>
<Stack.Screen
name="Register"
component={Register}
options={{title: i18n.t('register.title'), headerShown: false}}
/>
<Stack.Screen
name="Reset"
component={Reset}
options={{title: i18n.t('reset.title')}}
/>
<Stack.Screen
name="Tools"
component={Tools}
options={{title: i18n.t('tools.title')}}
/>
<Stack.Screen
name="Scan"
component={Scan}
options={{title: i18n.t('scan.title')}}
/>
<Stack.Screen
name="Current"
component={Current}
options={{title: i18n.t('current.title')}}
/>
<Stack.Screen
name="Completed"
component={Completed}
options={{title: i18n.t('completed.title')}}
/>
<Stack.Screen
name="Products"
component={Products}
options={{title: i18n.t('products.title')}}
/>
<Stack.Screen
name="ProductDetails"
component={ProductDetails}
options={{title: i18n.t('fiche.title')}}
/>
<Stack.Screen
name="Information"
component={Information}
options={{title: i18n.t('information.title')}}
/>
<Stack.Screen
name="Photos"
component={Photos}
options={{title: i18n.t('photos.title')}}
/>
<Stack.Screen
name="Stock"
component={Stock}
options={{title: i18n.t('stock.title')}}
/>
<Stack.Screen
name="Terms"
component={Terms}
options={{title: i18n.t('terms.title')}}
/>
<Stack.Screen
name="About"
component={About}
options={{title: i18n.t('about.title')}}
/>
<Stack.Screen
name="Tickets"
component={Tickets}
options={{title: i18n.t('tickets.title')}}
/>
<Stack.Screen
name="Dashboard"
component={Dashboard}
options={{title: i18n.t('dashboard.title')}}
/>
<Stack.Screen
name="Settings"
component={Settings}
options={{title: i18n.t('settings.title')}}
/>
<Stack.Screen
name="Welcome"
component={Welcome}
options={{title: i18n.t('welcome.title')}}
/>
<Stack.Screen
name="BottomTabNavigator"
component={BottomTabNavigator}
options={{title: i18n.t('welcome.title')}}
/>
</Stack.Navigator>
);
};
export const BottomTabNavigator = () => {
return (
<Tab.Navigator
tabBarOptions={{
activeTintColor: 'black',
labelStyle: {fontSize: 12, color: 'white'},
style: {backgroundColor: '#F78400'},
}}>
<Tab.Screen
name={'OrdersTab'}
component={Orders}
options={{
tabBarIcon: ({focused, horizontal, tintColor}) => {
return (
<Image
source={require('../assets/images/orders.png')}
style={styles.icon}
/>
);
},
}}
/>
<Tab.Screen
name={'DashboardTab'}
component={Dashboard}
options={{
tabBarIcon: ({focused, horizontal, tintColor}) => {
return (
<Image
source={require('../assets/images/dashboard.png')}
style={styles.icon}
/>
);
},
}}
/>
<Tab.Screen
name={'ToolsTab'}
component={Tools}
options={{
tabBarIcon: ({focused, horizontal, tintColor}) => {
return (
<Image
source={require('../assets/images/tools.png')}
style={styles.icon}
/>
);
},
}}
/>
<Tab.Screen
name={'SettingsTab'}
component={Settings}
options={{
tabBarIcon: ({focused, horizontal, tintColor}) => {
return (
<Image
source={require('../assets/images/settings.png')}
style={styles.icon}
/>
);
},
}}
/>
</Tab.Navigator>
);
};