反应导航底部选项卡中的标题答案

【问题标题】：header in react navigation bottom tabs反应导航底部选项卡中的标题
【发布时间】：2021-08-06 00:13:48
【问题描述】：

您好，我正在创建一个带有 react native 的应用程序，并且我正在对菜单使用 react 导航，但我发现了一个问题，现在当我创建一个带有底部选项卡的菜单时，还会创建一个标题，因此它给了我一个问题我想知道如何解决这个问题或让标题消失

mi 码是

import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details!</Text>
    </View>
  );
}

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

const HomeStack = createNativeStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
}

const SettingsStack = createNativeStackNavigator();

function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
      <SettingsStack.Screen name="Details" component={DetailsScreen} />
    </SettingsStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Settings" component={SettingsStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

【问题讨论】：

标签： javascript react-native header react-navigation

【解决方案1】：

我会尝试在您的其中一个屏幕上添加一个选项来隐藏标题。 Tab.Screen(s) 或 Stack 的 Screen(s) 之一 ─ 取决于您的用例。

例如：

...
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} options={{headerShown: false}} />
        <Tab.Screen name="Settings" component={SettingsStackScreen} options={{headerShown: false}} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

这样你就不会同时出现两个嵌套的标题。

在嵌套导航器时，React Navigation 甚至从他们的文档中推荐了这一点。

当嵌套多个堆栈、抽屉或底部选项卡导航器时，将显示来自子导航器和父导航器的标题。但是，通常更希望在子导航器中显示标题并在父导航器的屏幕中隐藏标题。

为此，您可以使用 headerShown: false 选项在包含导航器的屏幕中隐藏标题。

参考：https://reactnavigation.org/docs/nesting-navigators/#nesting-multiple-navigators

【讨论】：