react native - react - cómo mostrar los encabezados en la navegación de reacción con TabNavigation

react navigation v2

Question

Noté que las vistas en StackNavigation muestran el título del encabezado, pero si configuro esas mismas pantallas en un TabNavigation, no muestra un encabezado. Solo muestra un encabezado si envuelvo un StackNavigation alrededor de cada pestaña, o envuelvo el TabNavigation anidado dentro de un StackNavigation.

¿Por qué las pantallas en TabNavigation no muestran un encabezado? ¿Es ese el comportamiento esperado? Si es así, ¿es mejor tener un StackNavigation en cada pestaña, o un gran StackNavigation alrededor del TabNavigation?

// las pestañas de navegación no muestran un título de encabezado en cada pantalla

const TabsNavigator = TabNavigator({
  Home: {
    screen:HomeScreen,
  },
  Profile: {
    screen: ProfileScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: ''#e91e63'',
  },
  navigationOptions: {
    header: {
      visible: true,
    },
  },
});

El encabezado se muestra cuando lo envuelvo en un StackNavigator

default StackNavigator({
  Home: { screen: TabsNavigator },
});

¿O es mejor hacerlo de esta manera?

 export TabsNavigator = TabNavigator({
      Home: {
        screen:StackNavigator({
          Home: { screen: HomeScreen },
        }),
      },
      Profile: {
        screen: StackNavigator({Profile: {screen: ProfileScreen}}),
      },
    }, {
      tabBarOptions: {
        activeTintColor: ''#e91e63'',
      },
      navigationOptions: {
        header: {
          visible: true,
        },
      },
    });

Answer 1

Incluso si esta es una pregunta bastante antigua, me hice esta pregunta hace un par de días, así que agregaré mis dos centavos al respecto con la esperanza de que esto también sea útil para otra persona en el futuro.

React Navigation es un producto asombroso con una gran cantidad de personalización, pero a veces también resulta confuso, lo que también se aplica a algunas secciones de la documentación. navigationOptions opción de navigationOptions partir de los estados de la versión actual es común para todas las pantallas, pero la "lista de opciones de navegación disponibles depende del navegador al que se agrega la pantalla". https://reactnavigation.org/docs/tab-navigator.html#navigationoptions-used-by-tabnavigator por lo tanto, la opción de header no funciona porque no está disponible para TabNavigator sí.

Con respecto a su pregunta sobre qué enfoque es el mejor, eso depende de lo que desea lograr con la navegación de su propia aplicación. Si coloca su TabNavigator dentro de un StackNavigator el componente del encabezado será común para todas las pestañas dentro del TabNavigator , lo que significa que la transición de la pestaña tendrá efecto pero el encabezado no se moverá desde su posición superior. Por otro lado, si elige anidar un StackNavigator dentro de cada pestaña, el encabezado se renderizará dentro de cada pestaña, lo que significa que el encabezado se moverá a lo largo de la animación de transición de la pestaña.

Hice una demo rápida para que veas la diferencia, el code también está disponible si quieres jugar con él.

Answer 2

Según React-Navigation TabNavigator Docs, no hay encabezado navigationOption. Por lo tanto, cuando escribe el siguiente código, en realidad está configurando un valor no existente, por lo tanto, lo que está haciendo no afecta nada.

navigationOptions: {
  header: { visible: true },
}

Lamentablemente, necesitas un StackNavigator en esta situación.