React Native：设置 React 导航的屏幕标题

Question

如果jwt=true，我希望从BottomTabsNavigator中获得选项卡，从StackNavigator中获得标题。

有人知道我该怎么做吗？

你可以在下面找到我的导航jsx。

如果我没有提供足够的细节，请问我。

谢谢。

<NavigationContainer>
{jwt ? (
<Bottom.Navigator>
<Bottom.Screen
name="ToDoList"
component={Home}
options={{
title: "Not To Do List",
tabBarIcon: ({ color }: any) => (
<Icon name="check" color={color} size={28} />
),
}}
/>
<Bottom.Screen
name="NotToDoList"
component={NotToDo}
options={{
title: "To Do List",
tabBarIcon: ({ color }: any) => (
<FIcon name="ban" color={color} size={28} />
),
}}
/>
<Bottom.Screen
name="Profile"
component={Profile}
options={{
tabBarIcon: ({ color }: any) => (
<FIcon name="user" color={color} size={28} />
),
}}
/>
</Bottom.Navigator>
) : (
<Stack.Navigator>
<Stack.Screen
name="SignIn"
component={SignIn}
options={{ ...centerTitle("Sign In"), headerLeft }}
/>
<Stack.Screen
name="SignUp"
component={SignUp}
options={{ ...centerTitle("Sign Up"), headerLeft }}
/>
</Stack.Navigator>
)}
</NavigationContainer>

Answer 1

如果您想为底部选项卡导航器的屏幕显示堆栈导航器的标题，您可以将选项卡导航器嵌套在另一个堆栈导航器中。

这是你可以应用的一般结构：

NavigationContainer
...MainNavigator (StackNavigator): show if `jwt`
......BottomNavigator (TabNavigator and Screen of MainNavigator)
...LoginNavigator (StackNavigator) show if not `jwt`  

我做了一个更通用的可复制的例子来说明这一点：

import React from 'react';
import {Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const Main = createStackNavigator();
const Login = createStackNavigator();
const Tab = createBottomTabNavigator();
const Screen1 = () => {
return <Text>Screen1</Text>;
};
const Screen2 = () => {
return <Text>Screen1</Text>;
};
const LoginPage = () => {
return <Text>LoginPage</Text>;
};
function TabNavigator() {
return (
<Tab.Navigator>
<Tab.Screen name="Screen1" component={Screen1} />
<Tab.Screen name="Screen2" component={Screen2} />
</Tab.Navigator>
);
}
function MainNavigator() {
return (
<Main.Navigator>
<Main.Screen name="Tabs" component={TabNavigator} />
</Main.Navigator>
);
}
function LoginNavigator() {
return (
<Login.Navigator>
<Login.Screen name="Login" component={LoginPage} />
</Login.Navigator>
);
}
const App = () => {
const jwt = true; // in your case this value is dynamic of course
return (
<NavigationContainer>
{jwt ? <MainNavigator /> : <LoginNavigator />}
</NavigationContainer>
);
};
export default App;

更新

如果您希望堆栈导航器标头的名称与选项卡导航器中的屏幕名称相同，或者如果您希望名称以基于选项卡名称的另一种方式动态，我们可以使用react navigation提供的getFocusedRouteNameFromRoute。

getFocusedRouteNameFromRoute是从@react navigation/nature导入的，就像NavigationContainer一样。

// First we create a function like this:
function getHeaderTitle(route) {
// In case the focused route is not found, assume it's the first screen, Screen1 in this example.
return getFocusedRouteNameFromRoute(route) ?? 'Screen1';
}
// Then we can use it like this:
function MainNavigator() {
return (
<Main.Navigator>
<Main.Screen
options={({route}) => ({
headerTitle: getHeaderTitle(route),
})}
name="Tabs"
component={TabNavigator}
/>
</Main.Navigator>
);
}

您可以在文档中阅读：https://reactnavigation.org/docs/screen-options-resolution/#setting-基于子导航器状态的父屏幕选项。