javascript - 标题标题不会随着底部导航而改变 React Native Navigation v5

Question

所以我得到了嵌套导航，如代码所示。现在我正在尝试制作标题栏。但是，当我从底部导航更改屏幕时，无论我在哪个屏幕上，标题都保持不变(始终是我在浏览器屏幕上的鞋子)。 React 导航标题是创建标题栏的最佳选择还是更适合创建完全自定义的标题栏。谢谢

我希望页眉标题会随着页面的变化而变化。

const Stack = createStackNavigator();
const Tabs = createMaterialBottomTabNavigator();
const AuthStack = createStackNavigator();

const TabsScreen = () => (
<Tabs.Navigator shifting={true} initialRouteName="Home" activeColor="#fff">
<Tabs.Screen
name="Home"
component={Browser}
options={{
tabBarLabel: 'Home',
tabBarColor: '#009387',
tabBarIcon: ({color}) => (

),
}}
/>
<Tabs.Screen
name="Sleep"
component={Sleep}
options={{
tabBarLabel: 'Sleep',
tabBarColor: '#694fad',
tabBarIcon: ({color}) => (

),
}}
/>
<Tabs.Screen
name="Settings"
component={SettingWithContext}
options={{
tabBarLabel: 'Settings',
tabBarColor: '#694fad',
tabBarIcon: ({color}) => (

),
}}
/>
</Tabs.Navigator>
);

export default CreateStack = () => {
const [isLoading, setIsLoading] = React.useState(true);
const [userToken, setUserToken] = React.useState(null);

const authContext = React.useMemo(() => {
return {
signIn: () => {
setIsLoading(false);
setUserToken('asdf');
},
signUp: () => {
setIsLoading(false);
setUserToken('asdf');
},
signOut: () => {
setIsLoading(false);
setUserToken(null);
},
};
}, []);

React.useEffect(() => {
setTimeout(() => {
setIsLoading(false);
}, 1000);
}, []);

if (isLoading) {
return ;
}
return (
<AuthContext.Provider value={authContext}>

{userToken ? (
<Stack.Navigator initialRouteName={Browser}>
<Stack.Screen name="Browser" component={TabsScreen} />
<Stack.Screen name="PreScreen" component={PreScreen} />
<Stack.Screen name="Player" component={Player} />
</Stack.Navigator>
) : (
<AuthStack.Navigator
screenOptions={{headerShown: false}}
initialRouteName={RegisterLogin}>
<AuthStack.Screen name="RegisterLogin" component={RegisterLogin} />
<AuthStack.Screen name="Login" component={LoginWithContext} />
<AuthStack.Screen name="Register" component={RegisterWithContext} />
</AuthStack.Navigator>
)}

</AuthContext.Provider>
);
};

Answer 1

如果你想让每个选项卡名称都位于顶部，试试这个:https://reactnavigation.org/docs/screen-options-resolution/

查看 getHeaderTitle 函数和下面的 switch 语句 - 它帮助我实现了这个行为。