Estoy tratando de trabajar con React Navigation usando un componente de botón externo, para facilitar el estilo, pero me da el error TypeError: undefined is not an object (evaluating '_this.props.navigation') cuando intento pasar el navegación. Si creo el botón en mi pantalla de inicio, funciona bien, pero eso desordena la hoja de estilo de mi HomeScreen y significa que tengo que repetir el código cuando uso el botón en otro lugar.

Tengo la navegación de pila configurada en mi App.js y, de nuevo, funciona bien cuando no intento pasar la navegación como accesorio.

Aquí está HomeScreen.js

 import React from "react"; import { ScrollView, StyleSheet, Text, View, AsyncStorage, } from 'react-native'; import Heading from '../heading'; import Input from '../Input'; import Button from "../Button"; export const Home = ({navigation}) => ( <View style={styles.container}> <ScrollView style={styles.content}> <Heading /> </ScrollView> <Button/> </View> )

Y aquí está mi Button.js

 /* eslint-disable prettier/prettier */ import React from 'react'; import { StyleSheet, Text, View, TouchableHighlight } from 'react-native'; import { useNavigation } from '@react-navigation/native'; function Button(){ const navigation = useNavigation() return( <View style={styles.buttonContainer}> <TouchableHighlight underlayColor='rgba(175, 47, 47, .75)' activeOpacity={1.0} style={styles.button} onPress={() => { navigation.navigate("New Medication"); }}> <Text style={styles.submit}> + </Text> </TouchableHighlight> </View> ) }

Según tengo entendido, esto debería funcionar bien, entonces, ¿por qué dice que se pasa como indefinido?

ACTUALIZACIÓN: gracias a algunas sugerencias, ahora lo tengo donde no da un error, simplemente no hace nada.

Aquí está mi App.js , con mi navegación

 const Stack = createStackNavigator(); function MyStack() { return ( <Stack.Navigator screenOptions={{ headerShown: false }}> <Stack.Screen name="Home" component={Home} /> <Stack.Screen name="NewMedication" component={newMedScreen} /> </Stack.Navigator> ); } class App extends Component{ render(){ return( <NavigationContainer> <MyStack /> </NavigationContainer> ); } } export default App;