Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

290
Vistas
React Navigation 6: anule la configuración del encabezado del navegador principal desde una pantalla dentro del navegador secundario

Tengo un navegador BottomTab anidado dentro de un navegador Stsck . Y el encabezado se configura a través de Stack screenOptions :

 function AppStackNavigator() { return ( <Stack.Navigator screenOptions={getScreenOptions}> <Stack.Screen name="BottomTab" component={BottomTabNavigator}/> ... </Stack.Navigator> ) const getScreenOptions = ({route, navigation}) => { // crazy logic ... return { headerLeft: getHeaderLeft, headerRight: getHeaderRight, ... } } }

Y en el navegador BottomTaB tengo una pantalla llamada Target . Tenga en cuenta que el headerShown se establece en false aquí.

 function BottomTabNavigators() { return ( <Tab.Navigator screenOptions={{headerShown: false}} tabBar={props => <MyTabBar {...props}/>} > <Tab.Screen name="Target" component={TargetScreen}/> </Tab.Navigator> ) }

En la pantalla de destino, headerRight el encabezado Derecho del navegador PADRE , porque necesito una interacción directa entre el encabezado y un método ( methodThatIsOnlyAccessableHere ) al que solo se puede acceder dentro de esta pantalla:

 function TargetScreen() { const methodThatIsOnlyAccessableHere = () => { ... } useLayoutEffect(() => { const getHeaderRight = () => { // call methodThatIsOnlyAccessableHere ... } const parentNavigator = navigation.getParent() parentNavigator.setOptions({ headerRight: getHeaderRight, }) }, [navigation]) }

Comportamiento actual:

La configuración del encabezado de nivel superior ( screenOptions en el navegador Stack) funciona perfectamente. Al navegar a la pantalla Target , la configuración del encabezado anulado (usando setOptions ) se activará. Sin embargo , al salir de esta pantalla, esta configuración anulada aún permanece activa (comportamiento no deseado)

Comportamiento deseado

Al salir de la pantalla de Target , la configuración del encabezado de nivel superior debería activarse y la configuración anulada debería dejar de tener efecto.

¿Por qué es esta mi elección de diseño?

Siempre escondo el encabezado del navegador anidado (el encabezado del navegador BottomTab ) y configuro el encabezado del navegador de nivel superior (principal) (Navegador de Stack ) según el estado del navegador secundario. No puedo mover la configuración del encabezado de la pantalla de Target a la principal porque, en este caso, no tendré acceso al methodThatIsOnlyAccessableHere .

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Debería actualizar headerRight nuevamente. Por ejemplo: use la limpieza de su gancho useLayoutEffect .

 useLayoutEffect(() => { const getHeaderRight = () => { // call methodThatIsOnlyAccessableHere ... } const parentNavigator = navigation.getParent() parentNavigator.setOptions({ headerRight: getHeaderRight, }) // cleanup return () => { parentNavigator.setOptions({ headerRight: null }) } }, [navigation])
about 4 years ago · Juan Pablo Isaza Denunciar

0

Supongo que su función TargetScreen se ejecuta para cada llamada de ruta, para anular el elemento principal siempre que sea posible. Si es cierto, podría restablecer las opciones al comienzo de su enlace useLayoutEffect y, suponiendo nuevamente que su llamada getParent() verifique a qué tipo de página está accediendo, restablecería la navegación de la página actual cada vez que se llame al efecto sin afectar su anulación llamar.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda