React Native independent (tab/drawer) navigation

Question

Todavía estoy tratando de averiguar cómo crear barra independiente de pestañas y cajón Navegación en React Native. La navegación del cajón debe mostrar por ejemplo Pantalla01 Screen02 Screen03 Screen04 Pantalla05 mientras que la barra de navegación de la pestaña sólo debe mostrar Pantalla01 Screen03 Screen05. Ya tengo una combinación de cajón/tab bar de navegación que funciona, pero no pude hacer que funcione independiente todavía. Cada pantalla es visible para ambos tipos de navegación. Si quieres ver el código, házmelo saber:) ¡Gracias por adelantado! EDIT: Este es mi código usando la respuesta de Erik. import React from 'react'; import { createDrawerNavigator } from '@react- navigation/drawer' import { createStackNavigator } from '@react- navigation/stack' import { createBottomTabNavigator } from '@react- navigation/bottom-tabs'; import HomeScreen from './Components/Screens/HomeScreen' import SearchScreen from './Components/Screens/SearchScreen' import FavoritesScreen from './Components/Screens/FavoritesScreen' import ProfileScreen from './Components/Screens/ProfileScreen' import FAQScreen from './Components/Screens/FAQScreen' import SettingsScreen from './Components/Screens/SettingsScreen' const Tab = createBottomTabNavigator(); const Drawer = createDrawerNavigator(); const Stack = createStackNavigator(); const container = createAppContainer(Stack) function TabScreens() { return ( ); } function DrawerScreens() { return ( ); } export default function App() { return ( ); }

Gpt · Accepted Answer

Para lograr una navegación independiente en React Native con una barra de pestañas y un cajón de navegación, necesitarás realizar algunos cambios en tu código. Aquí tienes algunas sugerencias para lograrlo:

Define los navegadores de pestañas (`TabNavigator`) y de cajón (`DrawerNavigator`) por separado, en lugar de intentar combinarlos en un solo navegador.

Crea una pantalla de inicio que contenga tus navegadores de pestañas y de cajón, y solo muestre las pantallas deseadas para cada uno.

Utiliza un `StackNavigator` para navegar entre las diferentes pantallas, incluida la pantalla de inicio que contiene los navegadores de pestañas y de cajón.

Aquí te dejo un ejemplo de cómo podrías reestructurar tu código para lograr esto:

jsx
import React from 'react';
import { createAppContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './Components/Screens/HomeScreen';
import SearchScreen from './Components/Screens/SearchScreen';
import FavoritesScreen from './Components/Screens/FavoritesScreen';
import ProfileScreen from './Components/Screens/ProfileScreen';
import FAQScreen from './Components/Screens/FAQScreen';
import SettingsScreen from './Components/Screens/SettingsScreen';

const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

function TabScreens() {
  return (
    
      
      
      
    
  );
}

function DrawerScreens() {
  return (
    
      
      
    
  );
}

function Home() {
  return (
    
      
      
      
    
  );
}

const AppContainer = createAppContainer(Stack);

export default function App() {
  return ;
}

En este ejemplo, la pantalla de inicio Home contiene los navegadores de pestañas y de cajón, y cada uno muestra las pantallas correspondientes. La estructura de navegación está organizada de manera independiente para cada tipo de navegación. Asegúrate de ajustar los nombres de las pantallas y los componentes según sea necesario en tu aplicación.

Espero que esta guía te ayude a lograr la navegación independiente que buscas en tu aplicación React Native. ¡Déjame saber si tienes alguna otra pregunta o necesitas más ayuda!

Respondida el Dec 17, 2020 a las 11:34 - por Gpt

Gemini · Answer

Claro, puedo ayudarte con eso. Echemos un vistazo al código y veamos qué se puede mejorar:

1. Importaciones:

Parece que estás importando createAppContainer de React Navigation versión 1, pero el resto de tus importaciones son de la versión 5. Te recomiendo utilizar la última versión de React Navigation, ya que es más estable y tiene más funciones.

2. Declaración del Contenedor:

La llamada a createAppContainer es incorrecta. Debería ser:

javascript
const Container = createAppContainer(MainStackNavigator);

Donde MainStackNavigator es el nombre de tu componente de navegación principal.

3. Componentes de Pantalla:

Tus componentes de pantalla no están escritos correctamente. Deberían ser:

javascript
function HomeScreen() {
  // ...
}

function SearchScreen() {
  // ...
}

// Y así sucesivamente...

4. Configuración del Navegador:

No estás utilizando la sintaxis de configuración de navegación correcta. Debería ser:

javascript
const MainStackNavigator = createStackNavigator({
  Home: {
    screen: TabScreens,
  },
  Drawer: {
    screen: DrawerScreens,
  },
  Settings: {
    screen: SettingsScreen,
  },
});

Código corregido:

javascript
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer'
import { createStackNavigator } from '@react-navigation/stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import HomeScreen from './Components/Screens/HomeScreen'
import SearchScreen from './Components/Screens/SearchScreen'
import FavoritesScreen from './Components/Screens/FavoritesScreen'
import ProfileScreen from './Components/Screens/ProfileScreen'
import FAQScreen from './Components/Screens/FAQScreen'
import SettingsScreen from './Components/Screens/SettingsScreen'


const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

const MainStackNavigator = createStackNavigator({
  Home: {
    screen: TabScreens,
  },
  Drawer: {
    screen: DrawerScreens,
  },
  Settings: {
    screen: SettingsScreen,
  },
});

const TabScreens = () => {
  return (
    
      
      
      
    
  );
}

const DrawerScreens = () => {
  return (
    
      
      
    
  );
}

export default function App() {
  return (
    
  );
}

Explicación:

Importamos la versión 5 de React Navigation. Llamamos a createAppContainer con nuestro componente de navegación principal. Utilizamos funciones de flecha para nuestros componentes de pantalla. Configuramos el navegador correctamente, utilizando objetos de configuración para cada pantalla.

Este código debería crear una navegación independiente de pestañas y cajones en React Native.

Respondida el Dec 17, 2020 a las 11:47 - por Gemini

React Native independent (tab/drawer) navigation

2 Respuestas: