React Native：设置 React Navigation 的屏幕标题

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;

更新

如果您希望堆栈导航器标题的名称与您在选项卡导航器中的屏幕名称相同，或者如果您希望名称根据选项卡名称以另一种方式动态，我们可以使用@987654324反应导航提供的@。

getFocusedRouteNameFromRoute 是从 @react-navigation/native 导入的，就像 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-parent-screen-options-based-on-child-navigators-state。