Soy nuevo para reaccionar nativo y reaccionar navegación y me sale este error.
TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'navegar')
No entiendo mi porque solo estoy usando el mismo código que ya funcionó, pero ahora no funciona.
Estoy tratando de hacer una flecha hacia atrás que lo envíe de regreso a la pantalla MachineList.
//doesn't work const AddMachineDetails = ({route}, props) => { ... <TouchableOpacity onPress={() => props.navigation.navigate("MachinesList")}> <BackArrow /> </TouchableOpacity>Entonces, cuando presiono mi flecha hacia atrás, me envía este error:
Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')
Aquí está mi archivo de navegación:
import MachinesList from '../components/MachinesList' import AddMachineDetails from '../components/AddMachineDetails'; ... function MachineListStackScreen() { return( <Stack.Navigator screenOptions={{headerShown: false}}> <Stack.Screen name='MachinesList' component={MachinesList}/> <Stack.Screen name='AddMachineDetails' component={AddMachineDetails}/> </Stack.Navigator> ) } ...Creo que el problema está en algún lugar de este código, pero si no, les mostraré más de mi código.
Aquí hay un ejemplo donde mi navigation.navigate funciona perfectamente:
//no specific imports (but works) const MachinesList = (props) => { ... <TouchableOpacity style={styles.machineBox} onPress={() => props.navigation.navigate('AddMachineDetails', {item})}>Tienes que destruir el argumento de los accesorios.
const AddMachineDetails = ({route, ...props}) => { ... }o
const AddMachineDetails = ({route, navigation, ...props}) => { ... } // then straightly use the *navigation*El problema está aquí ({route}, props) => .
Está desestructurando el primer argumento, pero no se pasan otros parámetros y es por eso que la variable "props" no está definida.
Tienes dos soluciones:
const AddMachineDetails = (props) => { const AddMachineDetails = ({route, navigation, ...props}) => { ... <TouchableOpacity onPress={() => navigation.navigate("MachinesListDetails")}> <BackArrow /> </TouchableOpacity>El encadenamiento opcional puede ser útil en el futuro para evitar errores en el tiempo de ejecución. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining