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

Question

您好，我正在使用 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>
  );
}

Answer 1

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

例如：

...
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

Answer 2

要在所有选项卡中生效，这样效果最好；

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