0
706
VistasNavegar a otra pantalla cuando se toca un botón en React Native
Soy bastante nuevo en React Native, quiero abrir otra pantalla cuando se toca un botón, la pantalla que quiero mostrar ya está creada. Utilicé TouchableOpacity como mi botón y utilicé la navegación en " onPress " prop. Mi aplicación ya usa el navegador de pila y el navegador de pestañas, así que instalé esos paquetes.
Lo he intentado pero me sale un error " undefined is not an object (evaluating 'navigation.navigate') "
Por favor ayuda.
En la pantalla donde estoy mostrando el botón:
const myWebview = ({ navigation }) => { return ( <View style={styles.buttonContainer}> <TouchableOpacity style={styles.button} onPress={() => navigation.navigate("NewListingScreen")} > <Text style={{ color: "#ffffff", fontWeight: "bold" }}> My Button Title </Text> </TouchableOpacity> </View> ); };En mi Tab Navigator (La pantalla funciona bien):
<Tab.Screen name={routes.newListingScreen} component={NewListingScreen} options={({ navigation }) => ({ tabBarButton: () => ( <NewListingButton onPress={() => { navigation.navigate(routes.newListingScreen); dispatch({ type: "SET_NEW_LISTING_SCREEN", newListingScreen: true, }); }} /> ), tabBarVisible: !user, })} /> 
Cuando uso const navigation = useNavigation();
me sale este error: 
1 Respuestas
Responde la pregunta0
Mi primera suposición es que el objeto de navigation en sí no está undefined aquí. El accesorio de navegación solo está disponible en las pantallas. -
const myWebview = ({ navigation }) => { El uso de hooks es una mejor alternativa para pasar objetos de navegación a componentes secundarios.
import { useNavigation } from '@react-navigation/native'; function NotificationsScreen() { const navigation = useNavigation(); return( ... <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('NewListingScreen')} > ... ); }