Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

288
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda