React-native-router-flux: ¿Cómo ocultar la barra de navegación?

Creado en 10 dic. 2015  ·  42Comentarios  ·  Fuente: aksonov/react-native-router-flux

Quiero eliminar la barra de navegación superior.
Intenté establecer showNavigationBar = {false} en la ruta, pero todavía está allí.
¿Me estoy perdiendo algo obvio?

Comentario más útil

¡Esto me funciona!

Todos 42 comentarios

Úselo para 'Enrutador', no para 'Ruta'. Las relaciones públicas para la documentación son bienvenidas :)

También lo he intentado, no elimina la barra de navegación: /

Permítame verificar

¿Estás seguro de que eliminaste la barra de navegación raíz primero?

De lo contrario, será visible si eres un niño oculto ...

skjermbilde 2015-12-10 kl 17 05 52

Solo para estar seguro, lo agrego en la mayoría de los lugares posibles.

¿Android o iOS? Acabo de modificar la demostración, agregué la bandera al inicio de sesión y no veo la barra de navegación allí normalmente:
¿O quieres ocultar la barra de navegación "Iniciar"? Entonces probablemente 'wrapRouter' no lo pase al enrutador interno, lo arreglaré.




            <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 la versión 1.0.2, también he deshabilitado la barra de navegación para la pantalla de 'inicio' dentro del Ejemplo.

Trabajado como un encanto. ¡Gracias!

¡Esto me funciona!

  <Router hideNavBar={true} >

También funciona.

Probé el código anterior de lakmalniranga, pero el encabezado aún ocupa un lugar.
https://snag.gy/91aXTj.jpg

hideNavBar = {true}: D

trabajo !!!! gracias @lakmalniranga

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

Ni siquiera necesitamos asignar a hideNavBar un valor de verdadero.
Si lo mencionamos, simplemente significa que le estamos dando un valor de verdadero en lugar de ser indefinido.
Solo agrego para futuros usuarios que se refieran a este problema.

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

alguna idea de por qué al usar hideNavBar todavía aparece
screen shot 2017-06-09 at 1 34 44 am
screen shot 2017-06-09 at 1 33 59 am

@Omarkojak Le diste al enrutador un paddingTop de 65. Eso significa que cada escena obtiene un paddingTop de 65 ya sea que tengan títulos (barra de navegación) o no.

ok arreglado lo siento por eso

¿Hay alguna forma no solo de ocultar la barra de navegación, sino también de eliminarla? Incluso oculto, sigue ocupando espacio en la pantalla.

aun aparece, no puedo ver porque
111
222

¿Algún avance en esto? incluso si ocultar la navegación todavía ocupa algo de espacio allí

@MehranJanfeshan ¿Estás hablando de la versión v4?

@aksonov Gracias por la respuesta, obtuve la versión 4 pero recibo este error:

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

Verifique primero los cambios importantes

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

@aksonov Gracias por la respuesta, obtuve la versión 4 pero recibo este error:

Se deben definir los accesorios de [react-native-router-flux]

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub o silencia el hilo.

@aksonov Encontré que en la versión anterior podía hacer esto:
<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>

pero después de mudarme a la versión 4 no puedo hacer eso, así que cambié a esto y funcionó:

<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>

pero esto no es lo que quiero, quiero poder categorizar la Escena, ¿hay alguna otra alternativa?

No entiendo el problema. Consulte Ejemplo e intente reproducir su problema allí.

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

@aksonov Encontré que en la versión anterior podía hacer esto:

pero después de mudarme a la versión 4 no puedo hacer eso, así que cambié a esto y funcionó:

pero esto no es lo que quiero, quiero poder categorizar la Escena, ¿hay alguna otra alternativa?

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub o silencia el hilo.

aquí está mi código que funciona perfectamente en la versión 3, pero cuando actualicé a la versión 4 recibí este error:
[react-native-router-flux] props should be defined
así que eliminé la parte que está rodeada por la línea azul y funciona bien.
image

Envuélvelo con una escena raíz.

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

aquí está mi código que funciona perfectamente en la versión 3, pero cuando actualicé a la versión 4 recibí este error:
Se deben definir los accesorios de [react-native-router-flux]
así que eliminé la parte que está rodeada por la línea azul y funciona bien.

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub o silencia el hilo.

si lo envuelvo con una escena raíz, ¿cómo puedo controlar el botón de retroceso? No quiero que el usuario pueda volver a la página de inicio de sesión, por eso solía usar Scene.

No se trata de RNRF, sino de la estructura de su aplicación. Supongo que debe usar tabs o deshabilitar el botón de retroceso (marcarlo con el atributo 'init') o usar el tipo 'reemplazar'. Ver ejemplo.

En realidad, v3 simplemente envolvió varias escenas en una, por lo que no verá ningún botón de retroceso (porque oculta la barra de navegación principal)

@aksonov Gracias por la ayuda y gracias por el gran trabajo :)

esto funcionó para mí: <Scene key="homeScreen" component={mainScreen} hideNavBar={1} />

Podrías usar <Scene key="homeScreen" component={mainScreen} hideNavBar />

@lakmalniranga esto funcionó para mí, ¡gracias!

Obras

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

@ahmetilhann ¡Gracias! Elimina todos los encabezados de las escenas secundarias en el enrutador, aún funciona a partir de la v4.0.0-beta.3.

@ahmetilhann ¡muchas gracias! ¿Quizás la forma anterior solo funciona en versiones anteriores a 4.0 RN? Estoy en 4.0.6 y headerMode="none" funciona

Actualicé mi proyecto a RN0.59.10, sin embargo, sigo usando react-native-router-flux para Router y Scene. Y tener este problema con la barra de encabezado blanca. Me tomó durante días, todo el tiempo sospeché que se debía a la navegación de reacción y logré apagarlo, pero todavía hay otro encabezado que bloquea la vista, entonces solo pensé en que podría deberse a react-native-router-flux. El método

¡Esto me funciona!

al punto

Hola,
el uso de hideNavBar hace que los componentes del agujero desaparezcan.
Aquí está mi 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>

¿Qué podría ser la causa?

Screenshot_2020-05-03 elschool

Hola,
el uso de hideNavBar hace que los componentes del agujero desaparezcan.
Aquí está mi 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>

¿Qué podría ser la causa?

Screenshot_2020-05-03 elschool

También tengo el mismo problema.

¿Fue útil esta página
0 / 5 - 0 calificaciones