Блог

Через несколько дней я спрашиваю здесь, потому что не нашел подходящего решения в Интернете.

Мой App.js render() возвращает навигатор ящика, как вы видите :

 render() {
        return (
            <NavigationContainer>
                <Drawer.Navigator
                    drawerContent={(props) => <this.customDrawerContent {...props} />}
                    initialRouteName="Past Launches"
                >
                    <Drawer.Screen name="Home" component={HomeScreen} options={drawerOptions}/>
                    <Drawer.Screen name="Next Launch" component={NextLaunch} options={drawerOptions}/>
                    <Drawer.Screen name="Past Launches" component={this.pastLaunches} options={drawerOptions}/>
                </Drawer.Navigator>
            </NavigationContainer>
        );
}
  

И здесь вы можете увидеть мой навигатор стека, возвращаемый функцией pastLaunches :

 pastLaunches() {
   return (
     <Stack.Navigator>
        <Stack.Screen name="launches" component={Launches} options={{ headerShown: false }}/>
        <Stack.Screen name="details" component={PastLaunchDetails} options={drawerOptions}/>
     </Stack.Navigator>
  );
}
  

Вот результат :

Но когда я открываю прошлые сведения о запуске :

Мы можем видеть заголовок ящика и заголовок стека.

Мой вопрос: как скрыть заголовок ящика, когда я нахожусь в этом представлении?

Большое спасибо!

Наконец, используйте headerShown: false

 const drawerOptions = { headerStyle: { backgroundColor: "#181C1F"}, headerTintColor: "white" };



export default class App extends React.Component {
    pastLaunches() {
        return (
          <Stack.Navigator headerMode='none'>
            <Stack.Screen name="launches" component={Launches} />
            <Stack.Screen name="details" component={PastLaunchDetails} options={drawerOptions}
            />
          </Stack.Navigator>
        );
    }

    customDrawerContent(props) {
        return (
            <ImageBackground style={{flex: 1, justifyContent: "center"}}>
                <DrawerContentScrollView {...props} style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)', flex: 1}} >
                    <DrawerItemList {...props} labelStyle={{ color: "white" }} activeTintColor="black" itemStyle={{ flex: 1 }}/>
                </DrawerContentScrollView>
            </ImageBackground>
        );
    }

    render() {
        return (
            <NavigationContainer>
                <Drawer.Navigator
                    drawerContent={(props) => <this.customDrawerContent {...props} />}
                    initialRouteName="Past Launches"
                    headerMode='none'
                >
                    <Drawer.Screen name="Home" component={HomeScreen} options={{...drawerOptions, headerShown: false}}/>
                    <Drawer.Screen name="Next Launch" component={NextLaunch} options={{...drawerOptions, headerShown: false}}/>
                    <Drawer.Screen name="Past Launches" component={this.pastLaunches} options={{...drawerOptions, headerShown: false}}/>
                </Drawer.Navigator>
            </NavigationContainer>
        );
    }
}
  

Пользовательский заголовок ящика

 import { DrawerActions } from '@react-navigation/native'

export const CustomDrawerHeader = (props) => {
      const navigation = useNavigation();
      return (<View style={{ flexDirection: 'row', paddingVertical: 12, paddingHorizontal: 12}}>
         <Button onPress={() => {
           navigation.dispatch(DrawerActions.toggleDrawer());
         }}
         title='Menu icon'></Button>
         <Text style={{textAlign: 'center'}}>{props.title}</Text>
      </View>)
}
  

Пользовательский заголовок back

 
export const CustomStackHeader = (props) => {
      const navigation = useNavigation();
      return (<View style={{ flexDirection: 'row', paddingVertical: 12, paddingHorizontal: 12}}>
         <Button onPress={() => {
           navigation.goBack();
         }}
         title='Back icon'></Button>
         <Text style={{textAlign: 'center'}}>{props.title}</Text>
      </View>)
}
  

Также я не рекомендую сохранять ваш StackNavigator в методе внутри вашего компонента ящика, перемещая его наружу (вы получите повторный рендеринг и потеряете производительность).