Paquetes utilizados:
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!
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 :-)