es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • React Navigation, ¿cómo hacer navegación en pila dentro de la navegación por pestañas en la versión 6?

React Navigation, ¿cómo hacer navegación en pila dentro de la navegación por pestañas en la versión 6?

14 Jul, 2023 Programación

Estoy tratando de crear una navegación con pestañas con “homepage”, “profile” y “search”, y dentro de la pantalla “home” crear una navegación en stack con “más detalles” y “lista de deseos”. Actualmente estoy utilizando react-navigation v6 y lo estoy intentando de esta manera:

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

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

const StackNavigator = () => {
  return (
    <stack.navigator>
      <stack.screen name="Homepage" component="{Homepage}"></stack.screen>
      <stack.screen name="MoreDetails" component="{MoreDetails}"></stack.screen>
      <stack.screen name="WishList" component="{WishList}"></stack.screen>
    </stack.navigator>
  )
}

export default App() {
  <navigationcontainer>
    <tab.navigator>
      <tab.screen name="Search" component="{Search}"></tab.screen>
      <tab.screen name="Homepage" component="{StackNavigator}"></tab.screen>
      <tab.screen name="Profile" component="{Profile}"></tab.screen>
    </tab.navigator>
  </navigationcontainer>
}

Entonces, cuando hagas clic en “homepage”, tendrás un botón para ir a “moreDetails” y en esta página tendrás un botón para ir a “wishlist”.

¿Qué estoy haciendo mal? Según la documentación, parece ser así. ¡Tu ayuda sería genial!

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Basándome en el código que proporcionaste, parece que estás en el camino correcto para lograr tu objetivo de crear una navegación de pestañas con “homepage”, “profile” y “search”, con una navegación de pila dentro de “homepage” para “more details” y “wishlist”.

    Una cosa a tener en cuenta es que debes actualizar tu declaración de exportación para devolver correctamente el NavigationContainer en lugar de intentar utilizarlo como una función. Aquí tienes una versión actualizada de tu código:

    import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

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

const HomepageStack = () => {
  return (
    <stack.navigator>
      <stack.screen name="Homepage" component="{Homepage}"></stack.screen>
      <stack.screen name="MoreDetails" component="{MoreDetails}"></stack.screen>
      <stack.screen name="WishList" component="{WishList}"></stack.screen>
    </stack.navigator>
  )
}

const App = () => {
  return (
    <navigationcontainer>
      <tab.navigator>
        <tab.screen name="Search" component="{Search}"></tab.screen>
        <tab.screen name="Homepage" component="{HomepageStack}"></tab.screen>
        <tab.screen name="Profile" component="{Profile}"></tab.screen>
      </tab.navigator>
    </navigationcontainer>
  )
}

export default App;

    Algunos problemas potenciales a tener en cuenta:

    • Asegúrate de haber importado correctamente todos los componentes y bibliotecas necesarios.
    • Verifica la ortografía y capitalización de tus componentes y nombres de pantalla, ya que deben coincidir exactamente para que la navegación funcione.
    • Asegúrate de haber definido y exportado correctamente todos los componentes y funciones necesarios.

    Aparte de eso, tu código se ve bien y debería funcionar como se pretende. ¡Buena suerte!

Comments are closed.