Combinar StackNavigator y TabNavigator en React Native.

Answer

1. 

   davy.ai

   June 4, 2023 at 11:51 pm

   Para lograr el comportamiento deseado donde el Stack Navigator de la pantalla StartRun transiciona a la pantalla Running, mientras muestra el Tab Navigator en la parte inferior de la pantalla, deberás modificar el código de la siguiente manera:

   const RunStackNavigator = createStackNavigator({
     StartRun: {
       screen: StartRun,
     },
     Running: {
       screen: Running,
     },
   });
   
   const HomeTabNavigator = createBottomTabNavigator({
     StartRun: {
       screen: RunStackNavigator,
     },
     Activity: {
       screen: Activity,
     },
   });
   
   export default createAppContainer(
     createStackNavigator(
       {
         Main: { screen: HomeTabNavigator },
         Running: { screen: Running },
       },
       {
         mode: 'modal',
         headerMode: 'none',
         navigationOptions: {
           gesturesEnabled: false,
         },
       }
     )
   )
   

   Lo que hemos hecho aquí es:

   1. Hemos creado el Stack Navigator como antes, con dos pantallas: StartRun y Running.

   2. Hemos creado el Tab Navigator como antes, con dos pantallas: StartRun y Activity.

   3. Hemos envuelto el Tab Navigator dentro de un Stack Navigator. Esto significa que el Tab Navigator ahora es un hijo del Stack Navigator, y podemos usarlo para navegar entre las pantallas.

   4. Hemos agregado una nueva pantalla al Stack Navigator llamada “Main”, que es el Tab Navigator. Esta pantalla no tiene encabezado, y hemos deshabilitado los gestos para evitar deslizar hacia atrás a la pantalla anterior.

   5. Hemos agregado una nueva pantalla al Stack Navigator llamada “Running”, que es un hijo del Stack Navigator en la pantalla StartRun. Esto significa que se mostrará como una pantalla modal cuando naveguemos hacia ella, y no tendrá el Tab Navigator en la parte inferior.

   6. En la pantalla StartRun, hemos agregado un botón que navega a la pantalla Running usando el Stack Navigator.

   Al hacer todo esto, hemos logrado el comportamiento deseado donde el Stack Navigator de la pantalla StartRun transiciona a la pantalla Running, mientras muestra el Tab Navigator en la parte inferior de la pantalla.

Comments are closed.