• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

456
Vistas
¿Cómo usar Drawer Navigator y Stack Navigator combinados en react-native?

Paquetes utilizados:

  1. "@react-navigation/cajón": "^6.1.8",
  2. "@react-navegación/nativo": "^6.0.6",
  3. "@react-navegación/pila": "^6.0.11",

Problema :

Imagen 1,2 y 3: He implementado un cajón que muestra dos opciones como Página de inicio y Términos y condiciones. Si hace clic en la opción t & c, abre su pantalla y lo mismo si hace clic en la pantalla de inicio, vuelve a la pantalla de la página de inicio.

Imagen 1 y 4: Hice que el texto "Haga clic para ver la página de detalles" se pueda hacer clic en la pantalla de inicio y, después de hacer clic, debería ir a la pantalla de detalles, pero arroja un error como la imagen 4. Estoy confundido sobre cómo implementarlo. ¿Dónde escribo el código Stack.Navigation?

Aplicación.js

 import * as React from 'react'; import { Button, View } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer } from '@react-navigation/native'; import HomeScreen from './Screens/HomeScreen'; import DetailPage from './Screens/DetailPage'; import TermsCondition from './Screens/TermsCondition'; const Drawer = createDrawerNavigator(); export default function App() { return ( <NavigationContainer> <Drawer.Navigator initialRouteName="HomeScreen"> <Drawer.Screen name="HomeScreen" component={HomeScreen} /> <Drawer.Screen name="Term&Condition" component={TermsCondition} /> </Drawer.Navigator> </NavigationContainer> ); }

Pantalla de inicio.js

 export default function HomeScreen({ navigation }) { return ( <TouchableOpacity onPress={() => navigation.navigate('DetailPage')}> <View style={{ flexDirection: 'row' }}> <Text style={{ fontSize: 50 }}>Click for Details Page</Text> </View> </TouchableOpacity> ); }

TermsCondition.js

 function TermsCondition({ navigation}) { return ( <View style={{ flexDirection: 'row' }}> <Text style={{fontSize:50}}>T&C Page</Text> </View> ); } export default TermsCondition;

DetailPage.js

 function DetailPage({ navigation}) { return ( <View style={{ flexDirection: 'row' }}> <Text style={{fontSize:50}}>DetailPage</Text> </View> ); }

exportar la página de detalles predeterminada; Perdón por esta pregunta tonta, pero lo intenté en línea pero me confundí mucho. ¡Gracias de antemano!

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Fue un paso simple de Navegación anidada Aquí está la solución para el mismo:

Aplicación.js

 import * as React from 'react'; import { Button, View } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer } from '@react-navigation/native'; import HomeScreen from './Screens/HomeScreen'; import DetailPage from './Screens/DetailPage'; import TermsCondition from './Screens/TermsCondition'; import { createStackNavigator } from '@react-navigation/stack'; const Drawer = createDrawerNavigator(); const Stack = createStackNavigator(); {/* Add Drawer.Navigation to a function.*/} function Root() { return ( <Drawer.Navigator> <Drawer.Screen name="HomeScreen" component={HomeScreen} /> <Drawer.Screen name="Term&Condition" component={TermsCondition} /> </Drawer.Navigator> ); } export default function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen options={{ }} name="Root" component={Root} {/*Call function as Stack.Screen*/} options={{ headerShown: false }} /> {/*This will disable function header*/} <Stack.Screen options={{ title: 'DetailPage' }} name="DetailPage" component={DetailPage} /> </Stack.Navigator> </NavigationContainer> ); }

Nota: Resto Todo el código para DetailPage.js, HomeScreen.js,TermCondition.js es el mismo.

PD. Tómese un descanso del error y regrese con la mente fresca. eso podría resolverlo :-)

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda