header 在 React 导航底部选项卡中

Question

你好，我正在创建一个带有 React Native 的应用程序，我正在为菜单使用 React 导航，但我发现了一个问题，现在当我创建一个带有底部选项卡的菜单时，也会创建一个 header，它给出了由于这个原因，我遇到了一个问题，我想知道如何解决这个问题或让 header

消失

enter image description here

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

我会尝试在您的其中一个屏幕上添加一个选项来隐藏 header。 Tab.Screen(s) 或 Stack 的屏幕之一 ─ 根据您的用例由您决定。

例如：

...
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>
  );
}

这样您就不会同时出现两个嵌套的 header。

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

When nesting multiple stack, drawer or bottom tab navigator, headers from both child and parent navigators would be shown. However, usually it's more desirable to show the header in the child navigator and hide the header in the screen of the parent navigator.

To achieve this, you can hide the header in the screen containing the navigator using the headerShown: false option.

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

header 在 React 导航底部选项卡中

header in react navigation bottom tabs

javascript

header

react-native

react-navigation