Recibo TypeError: undefined no es un objeto (evaluando 'route.params') al pasar accesorios de mi componente de inicio de sesión para notificar al componente
Aquí está Login.js
export const Login = ({navigation}) => { const [username, onChangeUsername] = React.useState(""); const [password, onChangePassword] = React.useState(""); return ( <View style={styles.container}> <View style={styles.card}> <Text style={{marginBottom:20}}>Login using your credentials</Text> <TextInput style={[styles.input,styles.shadowProp]} onChangeText={onChangeUsername} placeholder='Email' /> <TextInput style={[styles.input,styles.shadowProp]} onChangeText={onChangePassword} placeholder='Password' /> <Button title="Log In" style={styles.button} color= '#5e72e4' onPress={() => { /* 1. Navigate to the Details route with params */ navigation.navigate('Notify', { itemId: 85, otherParam: 'anything you want here', }); }} /> </View> </View> ); }Esto es Notificar.js
export const Notify = ({ route, navigation }) => { const { itemId } = route.params; const { otherParam } = route.params; console.log(route); // Gives me undefined console.log(route.params) // gives me undefined is not an object¿Alguien puede ayudar?
Este es el enlace snack.io adjunto para el mismo.
app.js debería ser
const NotifyScreen = ({navigation, route}) => { //console.log(decoded); return ( <Notify navigation={navigation} route={route} /> ) }porque la navegación y la ruta se le pasan, y luego puede pasar ambas al componente de notificación. cómo lo tenía actualmente, la ruta se perdió porque no estaba en la propiedad de navegación.
y Notificar se ve así
export const Notify = ({ navigation, route }) => { Pruebe qué propiedades están entrando en sus componentes antes de desestructurar las propiedades solo para asegurarse de que está recibiendo lo que cree que está recibiendo. Para esto, recomendaría console.logging los accesorios que provienen del enrutador o, por supuesto, mirar la documentación.
Ha escrito un código extra inútil. Puede pasar directamente la pantalla Login y Notify en el componente de la pantalla de navegación. No es necesario crear una función adicional. Entonces, primero pase sus pantallas en el componente de navegación como se muestra a continuación:
import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { Login } from './screens/Login'; import { Notify } from './screens/Notify'; const Stack = createStackNavigator(); export default function App() { return ( <NavigationContainer> <Stack.Navigator headerMode="none"> <Stack.Screen name="Login" component={Login} /> <Stack.Screen name="Notify" component={Notify} /> </Stack.Navigator> </NavigationContainer> ); } Como puede ver, puede pasar directamente la pantalla al componente de la pantalla de navegación, que le permite acceder a las propiedades de navigation y route en su pantalla.
Ahora, su código se ejecutará sin pasar la propiedad de navegación adicional.