Intento navegar entre dos páginas en una aplicación React Native. Sigo recibiendo errores para mis implementaciones, pero no sé por qué.
Tengo la siguiente configuración para un sitio de "Inicio" y "Configuración" en la aplicación React Native con Navigator ajustado de la documentación :
Aplicación.js
import Home from "./Home"; import { NavigationContainer } from '@react-navigation/native'; export default function App() { return <NavigationContainer><Home/></NavigationContainer> }Inicio.jsx
const Home = ({ navigation }) => { return ( <View style={["some style...", {}]}> <View style={["some style..."]}> <TouchableOpacity onPress={() => navigation.navigate('Settings')}> <Image "some image..."/> </TouchableOpacity> </View> </View>Configuración.jsx
Un componente que debe ser renderizado.
MiStack.jsx
import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import Home from './Home'; import Settings from './Settings'; const Stack = createNativeStackNavigator(); const MyStack = () => { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={Home} /> <Stack.Screen name="Settings" component={Settings} /> </Stack.Navigator> </NavigationContainer> ); }; Obtengo undefined is not an object (evaluating 'navigation.navigate') . También se agregan this.props a navigation.navigate('Settings') y se produce un error. Simplemente no puedo acceder a mi Navegador.
Parece que está configurando un navegador pero nunca lo usa, ya que en App.js solo está llamando a <Home/> .
App.js al código a continuación.Utilice la ruta correcta para la importación.
import MyStack from "./MyStack"; export default function App() { return <MyStack/> }MyStack.jsx : export default MyStack;