React Native：设置 React Navigation 的屏幕 Headers

Question

在 jwt = true 的情况下，我想要来自 BottomTabsNavigator 的选项卡和来自 StackNavigator 的 header。

有人知道我该怎么做吗？

你可以在下面找到我的导航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

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

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

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;

更新

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

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。

React Native：设置 React Navigation 的屏幕 Headers

React Native: Set React Navigation's Screens Headers

javascript

mobile

typescript

reactjs

react-native