Ocultar o cabeçalho no navegador da pilha de navegação React


136

Estou tentando mudar de tela usando os navegadores de pilha e de guias.

const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });

Neste caso, stacknavigator é usado primeiro e depois tabnavigator. e quero ocultar os cabeçalhos do navegador de pilha. W não está funcionando corretamente quando eu uso opções de navegação como ::

navigationOptions: { header: { visible: false } }

Estou tentando este código nos primeiros dois componentes que estão usando no stacknavigator. se eu usar esta linha, recebo algum erro como ::

insira a descrição da imagem aqui

Respostas:


330

ATUALIZAÇÃO a partir da versão 5

A partir da versão 5, é a opção headerShownemscreenOptions

Exemplo de uso:

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

Se você deseja ocultar apenas o cabeçalho em uma tela, pode fazer isso definindo as opções da tela no componente da tela, veja o exemplo abaixo:

<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />

Veja também o blog sobre a versão 5

ATUALIZAÇÃO
A partir da versão 2.0.0-alpha.36 (07-11-2019),
há uma nova opção de navegação:headershown

      navigationOptions: {
        headerShown: false,
      }

https://reactnavigation.org/docs/stack-navigator#headershown

https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

Resposta antiga

Eu uso isso para ocultar a barra de pilha (observe que este é o valor do segundo parâmetro):

{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

Quando você usa esse método, ele fica oculto em todas as telas.

No seu caso, será assim:

const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);

Funcionando perfeitamente! obrigado pela sua resposta, mas eu tenho um problema depois de adicionar isso que é :: alternar stacknavigator para tabnavigator está funcionando bem. se eu quiser mostrar o cabeçalho ao alternar a tela de tabnavigator para stacknaviagtor, o que devo fazer?
Avijit Dutta de

2
Hmm, essa é uma ótima pergunta. Para ser sincero, não sei disso. Você pode tentar a resposta @Dpkstr na tela que deseja mostrar, em vez de null, seria verdadeiro.
Perry de

Hmm, eu já tentei isso, mas também não estava funcionando ... obrigado pela sua primeira resposta. Vou fazer a segunda funcionalidade usando um botão apenas por agora.
Avijit Dutta de

como mostrar e ocultar o cabeçalho dinamicamente ao clicar no botão dentro do componente. Se dermos NavigationOptions estático = {header: null}. Vou ocultar o cabeçalho completamente. Quero mostrar ou ocultar ao clicar em algum botão
Venkatesh Somu

1
Se ele quiser ocultar o cabeçalho de uma tela específica na v5 + deve usar optionsprop como este<Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />
Oliver D

130

Basta usar o código abaixo na página em que deseja ocultar o cabeçalho

export default class Login extends Component {
    static navigationOptions = {
        header: null
    }
}

consulte Stack Navigator


Está funcionando bem, mas um problema é que quando a tela muda para tabNavigator de stacknavigator (conforme menção na minha pergunta, componentes como tela de verificação de OTP para tela de lista naquele momento, ambos os cabeçalhos estão sendo exibidos
Avijit Dutta

Você pode me dizer exatamente como está navegando para List
Dpkstr

22

Basta adicionar isso ao seu snippet de código de classe / componente e o cabeçalho ficará oculto

 static navigationOptions = { header: null }

15

Se sua tela for um componente de classe

static navigationOptions = ({ navigation }) => {
    return {
       header: () => null
    } 
}

codifique isso em sua tela de destino como o primeiro método (função).


1
certo, header: () => nullé a maneira correta, caso contrário, você obterá uma falha no cabeçalho ao carregar a página
Cristian Tr

11

Se você quiser se esconder em uma tela específica, faça assim:

// create a component
export default class Login extends Component<{}> {
  static navigationOptions = { header: null };
}

10

Estou usando em header : nullvez de header : { visible : true }estou usando CLI nativo de reação. este é o exemplo:

static navigationOptions = {
   header : null   
};

10

Na solução fornecida, o cabeçalho está oculto na tela inicial por- options = {{headerShown: false}}

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>
</NavigationContainer>

9

Adicione o novo objeto navigationOptions no stackNavigator.

Experimente isto:

const MainNavigator = createStackNavigator({
  LoginPage: {screen : LoginPageContainer, navigationOptions: { header: null } },
  MiddlePage: {screen : MiddlePageContainer, navigationOptions: { header: null } },
  SMS: {screen: ShowSmsContainer, navigationOptions: { header: null } },
  Map: {screen: ShowMapContainer, navigationOptions: { header: null } }
});

Espero que ajude.


7

Se alguém estiver pesquisando como alternar o cabeçalho para componentDidMount, escreva algo como:

  this.props.navigation.setParams({
      hideHeader: true,
  });

Quando

static navigationOptions = ({ navigation }) => {
    const {params = {}} = navigation.state;

    if (params.hideHeader) {
      return {
        header: null,
      }
    }

    return {
        headerLeft: <Text>Hi</Text>,
        headerRight: <Text>Hi</Text>,
        headerTitle: <Text>Hi</Text>
    };
};

E em algum lugar quando o evento terminar o trabalho:

this.props.navigation.setParams({
  hideHeader: false,
});

6

Isso funcionou para mim:

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);

4

Em sua tela direcionada, você deve codificar isso!

 static navigationOptions = ({ navigation }) => {
    return {
       header: null
    }
 }

4

Você pode ocultar o cabeçalho como este:

<Stack.Screen name="Login" component={Login} options={{headerShown: false}}  />

3

Isso está funcionando para navegação de pilha

<Stack.Screen
    name="Home"
    component={HomeComponent}
    options={{
        headerShown: false,
    }}
/>

2

Se você deseja removê-lo de uma tela em react-native-navigation:

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

1
const CallStack = createStackNavigator({
  Calls: Calls,
  CallsScreen:CallsScreen,
}, {headerMode: 'none'});

CallStack.navigationOptions = {
  tabBarLabel: 'Calls',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),

   header: null,

        headerVisible: false,

};

1

Todas as respostas mostram como fazer isso com componentes de classe, mas para componentes funcionais você faz:

const MyComponent = () => {
    return (
        <SafeAreaView>
            <Text>MyComponent</Text>
        </SafeAreaView>
    )
}

MyComponent.navigationOptions = ({ /*navigation*/ }) => {
    return {
        header: null
    }
}

Se você remover o cabeçalho, seu componente pode estar em lugares onde você não pode vê-lo (quando o telefone não tem tela quadrada), por isso é importante usá-lo ao remover o cabeçalho.


1
const MyNavigator = createStackNavigator({
  FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
  SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});

//header:null will be removed from upcoming versions

1
 <Stack.Screen
    name="SignInScreen"
    component={Screens.SignInScreen}
    options={{ headerShown: false }}
  />

options={{ headerShown: false }} funciona para mim.

** "@react-navigation/native": "^5.0.7", "@react-navigation/stack": "^5.0.8",


1

No react navigation 5.x, você pode ocultar o cabeçalho de todas as telas, definindo o headerModeprop do Navigatorpara false.

<Stack.Navigator headerMode={false}>
   {/* Your screens */}
</Stack.Navigator>

1

Você pode ocultar o cabeçalho StackNavigator assim:

const Stack = createStackNavigator();
function StackScreen() {
    return (
        <Stack.Navigator
            screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Training" component={Training} />
            <Stack.Screen name="Course" component={Course} />
            <Stack.Screen name="Signup" component={Signup} />
        </Stack.Navigator>
    );
}

0

É importante combinar a versão da biblioteca de navegação reativa que você está usando com a solução, pois são todas diferentes. Para aqueles que ainda usam o react-navigation v1.0.0 por algum motivo como eu, ambos funcionaram:

Para desativar / ocultar o cabeçalho em telas individuais:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main, navigationOptions: { header: null } },
    Login: { screen: Login },
    Profile: { screen: Profile, navigationOptions: { header: null } },
  });

Para desativar / ocultar todas as telas de uma vez, use:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main},
    Login: { screen: Login },
    Profile: { screen: Profile },
  },
  {
    headerMode: 'none',
  }
);

0

Na versão mais recente do react-navigation isso funciona para ocultar o cabeçalho em todas as telas: headerMode = {'none'}

<Stack.Navigator
headerMode={'none'}
>
    <Stack.Screen name="Home" component={HomeScreen}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>


0

para 4.x, o header: nullestá obsoleto, deve usar em headerShown: falsevez disso

ex:

const AppScreens = createStackNavigator({
  cover: {
    screen: Login,
    path: '/login',
    navigationOptions: () => ({
      headerShown: false,
    }),
  },
})

0
  1. Para a tela única, você pode definir header: null ou headerShown: false em createStackNavigator assim

    const App = createStackNavigator({
     First: {
    screen: Home,
    navigationOptions: {
      header: null,
                       },
           },
    });
  2. Ocultar o cabeçalho de todas as telas de uma vez usando defaultNavigationOptions

    const App = createStackNavigator({
    
    First: {
      screen: HomeActivity,
    },
    },
    
    {
    defaultNavigationOptions: {
      header: null
    },
    
    });

0

se você quiser remover o cabeçalho de todas as telas, vá para app.js e adicione este código a Stack.Navigator

screenOptions={ { headerShown: false } }
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.