React Native - 将抽屉标题隐藏在底部选项卡导航器内的堆栈中

Question

我想通过表单的所有屏幕隐藏抽屉标题，该表单实际上是一个堆栈。我正在使用 React Native CLI。

添加患者堆栈

  <Stack.Navigator screenOptions={{headerShown: false}}>
      <Stack.Screen name="Step1" component={Step1} options={{headerShown: false}}/>
      <Stack.Screen name="Step2" component={Step2} options={{headerShown: false}}/>
  </Stack.Navigator>

<Tab.Navigator>
      <Tab.Screen  name="Home" component={HomeScreen} />
      <Tab.Screen  name="AddPatient" component={AddPatientStack} />
</Tab.Navigator>

 <Drawer.Navigator
      screenOptions={{header: () => <HeaderMenu />}}
      drawerContent={props => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="BottomTabNavigator" component={BottomTabNavigator} />
</Drawer.Navigator>

我尝试了很多方法，但没有任何效果。

Answer 1

您可以使用 navigation.setOptions 在选项卡导航器内的屏幕上打开和关闭

headerShown

。您需要在创建选项卡导航器的组件中执行此操作；否则，导航道具将引用堆栈导航器而不是选项卡导航器：

import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation';
import {
  getFocusedRouteNameFromRoute,
  useFocusEffect,
} from '@react-navigation/native';
import HomeScreen from './Home';
import AddPatientStack from './AddPatient';
const Tab = createMaterialBottomTabNavigator();

export default function BottomNavigator({ navigation, route }) {
  useFocusEffect(() => {
    const routeName = getFocusedRouteNameFromRoute(route);
    navigation.setOptions({ headerShown: routeName == 'Home' });
  });
  return (
    <Tab.Navigator initialRouteName={'AddPatient'}>
      <Tab.Screen name="AddPatient" component={AddPatientStack} />
      <Tab.Screen name="Home" component={HomeScreen} />
    </Tab.Navigator>
  );
}

演示