React-native-router-flux: Como ocultar a barra de navegação?

Criado em 10 dez. 2015  ·  42Comentários  ·  Fonte: aksonov/react-native-router-flux

Quero remover a barra de navegação superior.
Tentei definir showNavigationBar = {false} na rota, mas ainda está lá.
Estou perdendo algo óbvio?

Comentários muito úteis

Isso funciona para mim!

Todos 42 comentários

Use-o para 'Roteador', não para 'Rota'. PR para documentação é bem-vindo :)

Eu tentei isso também, não remove a barra de navegação: /

Deixe-me ver

Tem certeza de que removeu a barra de navegação raiz primeiro?

Caso contrário, ficará visível se você estiver ocultando os filhos ...

skjermbilde 2015-12-10 kl 17 05 52

Só para ter certeza, eu adiciono na maioria dos lugares possíveis

Android ou iOS? Acabei de modificar a demonstração, adicionei o sinalizador ao Login e não vejo a barra de navegação normalmente:
Ou você deseja ocultar a barra de navegação "Iniciar"? Então provavelmente 'wrapRouter' não o passa para o roteador interno, vou consertar.




            <Route name="launch" component={Launch} initial={true} wrapRouter={true} title="Launch"/>
            <Route name="register" component={Register} title="Register"/>
            <Route name="home" component={Home} title="Replace" type="replace"/>
            <Route name="login" schema="modal">
                <Router showNavigationBar={false}>
                    <Route name="loginModal" component={Login} title="Login" schema="modal"/>
                    <Route name="loginModal2" component={Login2} title="Login2"/>
                </Router>
            </Route>
            <Route name="register2" component={Register} title="Register2"  schema="withoutAnimation"/>
            <Route name="tabbar">
                <Router footer={TabBar} showNavigationBar={false}>
                    <Route name="tab1" schema="tab" title="Tab #1" >
                        <Router>
                            <Route name="tab1_1" component={TabView} title="Tab #1_1" />
                            <Route name="tab1_2" component={TabView} title="Tab #1_2" />
                        </Router>
                    </Route>
                    <Route name="tab2" schema="tab" title="Tab #2" component={TabView} />
                    <Route name="tab3" schema="tab" title="Tab #3" component={TabView} />
                    <Route name="tab4" schema="tab" title="Tab #4" component={TabView} />
                    <Route name="tab5" schema="tab" title="Tab #5" component={TabView} />
                </Router>
            </Route>
        </Router>

Verifique a versão 1.0.2, desativei a barra de navegação para a tela de 'iniciar' no Exemplo também.

Funcionou como um encanto. Obrigado!

Isso funciona para mim!

  <Router hideNavBar={true} >

Também funciona.

Tentei o código acima em lakmalniranga, mas o cabeçalho ainda funciona.
https://snag.gy/91aXTj.jpg

hideNavBar = {true}: D

trabalhos !!!! obrigado @lakmalniranga

<Scene key="SplashSCreen" component={SplashSCreen}  title="splash" hideNavBar={true} initial/>

Nem mesmo precisamos atribuir a hideNavBar um valor true.
Se o mencionamos, então significa simplesmente que estamos atribuindo a ele um valor verdadeiro, em vez de indefinido.
Apenas adicionando para futuros usuários referindo-se a este problema.

<Scene 
key="SplashSCreen" 
component={SplashSCreen}  
title="splash" 
hideNavBar
 initial
/>

alguma ideia de por que, ao usar hideNavBar, ele ainda aparece
screen shot 2017-06-09 at 1 34 44 am
screen shot 2017-06-09 at 1 33 59 am

@Omarkojak Você deu ao roteador um paddingTop de 65. Isso significa que cada cena recebe um paddingTop de 65, quer tenham títulos (navbar) ou não.

ok consertado desculpe por isso

Existe alguma maneira de não apenas ocultar a barra de navegação, mas também removê-la? Mesmo oculto, ainda ocupa espaço na tela.

ainda aparece, não consigo ver porque
111
222

alguma atualização disso? mesmo se ocultar a navegação ainda ocupa algum espaço lá

@MehranJanfeshan Você está falando sobre a versão v4?

@aksonov Obrigado pela resposta, recebi a versão 4, mas estou recebendo este erro:

[react-native-router-flux] props should be defined

Verifique as alterações importantes primeiro

13 de julho de 2017, в 18:22, MehranJanfeshan [email protected] написал (а):

@aksonov Obrigado pela resposta, recebi a versão 4, mas estou recebendo este erro:

props [react-native-router-flux] devem ser definidos

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub ou ignore a conversa.

@aksonov Eu descobri que na versão antiga eu era capaz de fazer isso:
<Router sceneStyle={{margin:0}} hideNavBar={true}> <Scene key="auth"> <Scene key="login" component={AuthScreen}/> </Scene> <Scene key="main"> <Scene onRight={() => Actions.auth()} rightTitle="Log out" key="newOrderList" component={EmployeeList} title="New Orders" initial /> <Scene key="orderDetails" component={OrderDetails} title="Order Details"/> </Scene> </Router>

mas depois que mudei para a versão 4, não posso fazer isso, então mudei para esta e funcionou:

<Router sceneStyle={{margin:0}} hideNavBar={true}> <Scene key="auth"> <Scene key="login" component={AuthScreen}/> <Scene onRight={() => Actions.auth()} rightTitle="Log out" key="newOrderList" component={EmployeeList} title="New Orders" initial /> <Scene key="orderDetails" component={OrderDetails} title="Order Details"/> </Scene> </Router>

mas não é isso que eu quero, eu quero poder categorizar a Cena, existe alguma outra alternativa?

Eu não entendo o problema. Verifique o exemplo e tente reproduzir o seu problema aí.

13 de julho de 2017, в 18:45, MehranJanfeshan [email protected] написал (а):

@aksonov Eu descobri que na versão antiga eu era capaz de fazer isso:

mas depois que mudei para a versão 4, não posso fazer isso, então mudei para esta e funcionou:

mas não é isso que eu quero, eu quero poder categorizar a Cena, existe alguma outra alternativa?

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub ou ignore a conversa.

aqui está meu código que funciona perfeitamente na versão 3, mas quando atualizei para a versão 4, recebo este erro:
[react-native-router-flux] props should be defined
então removi a parte que está contornada pela linha azul e funcionou bem.
image

Envolva-o com uma cena raiz.

13 de julho de 2017, в 18:55, MehranJanfeshan [email protected] написал (а):

aqui está meu código que funciona perfeitamente na versão 3, mas quando atualizei para a versão 4, recebo este erro:
props [react-native-router-flux] devem ser definidos
então removi a parte que está contornada pela linha azul e funcionou bem.

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub ou ignore a conversa.

se eu envolvê-lo com uma cena raiz, como posso controlar o botão Voltar? Não quero que o usuário volte para a página de login, por isso que costumava usar o Scene.

Não se trata de RNRF, mas sim da estrutura de sua aplicação. Eu acho que você precisa usar tabs ou desabilitar o botão Voltar (marque-o com o atributo 'init') ou use o tipo 'substituir'. Verifique o exemplo.

Na verdade, a v3 envolveu várias cenas em uma, então você não verá nenhum botão Voltar (porque você esconde a barra de navegação principal)

@aksonov Obrigado pela ajuda e obrigado pelo excelente trabalho :)

funcionou para mim: <Scene key="homeScreen" component={mainScreen} hideNavBar={1} />

Você poderia apenas usar <Scene key="homeScreen" component={mainScreen} hideNavBar />

@lakmalniranga funcionou para mim, obrigado!

Funciona

const RouterComponent = () => (
    <Router headerMode="none">
        <Stack key="main">
            <Scene 
                key="login" 
                component={Login} 
            />
        </Stack>
    </Router>
);

@ahmetilhann Obrigado! Remove todos os cabeçalhos de cenas filhas no roteador, ainda funciona a partir de v4.0.0-beta.3.

@ahmetilhann muito obrigado! talvez a forma mais antiga só funcione em pré 4.0 RN? Estou no 4.0.6 e headerMode="none" funciona

Atualizei meu projeto para RN0.59.10, porém ainda usando react-native-router-flux para Router e Scene. E tendo esse problema de barra de cabeçalho branca. Demorou dias, o tempo todo eu suspeitava que era devido ao react-navigation e consegui desligá-lo, mas ainda há outro cabeçalho bloqueando a visão, então só pensei que pode ser devido ao react-native-router-flux. O método

Isso funciona para mim!

ao ponto

Olá,
usar o hideNavBar faz com que os componentes do furo desapareçam.
Aqui está o meu código:

<Router>
                <Stack key="root" >
                    <Scene key="login" component={Login} title="Login" initial={true} hideNavBar={true}/>
                    <Scene key="signup" component={Signup} title="Signup" />
                </Stack>
</Router>

O que poderia ser a causa?

Screenshot_2020-05-03 elschool

Olá,
usar o hideNavBar faz com que os componentes do furo desapareçam.
Aqui está o meu código:

<Router>
                <Stack key="root" >
                    <Scene key="login" component={Login} title="Login" initial={true} hideNavBar={true}/>
                    <Scene key="signup" component={Signup} title="Signup" />
                </Stack>
</Router>

O que poderia ser a causa?

Screenshot_2020-05-03 elschool

Eu também tenho o mesmo problema.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

willmcclellan picture willmcclellan  ·  3Comentários

moaxaca picture moaxaca  ·  3Comentários

rafaelcorreiapoli picture rafaelcorreiapoli  ·  3Comentários

xnog picture xnog  ·  3Comentários

VictorK1902 picture VictorK1902  ·  3Comentários