Estoy luchando para averiguar por qué mi código no funciona. Sigo leyendo los tutoriales y nada ayuda. ¿Cómo puedo cambiar entre pantallas y tener las pantallas en diferentes archivos JS (como componentes)?
Actualmente, mi código funciona para la primera pantalla, pero cuando hago clic en el botón no aparece nada.
Por favor, consulte los códigos a continuación:
Aplicación.js
import * as React from 'react'; import {Button, View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import TestScreen from './components/Test'; //HOME SCREEN function HomeScreen({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Go to Test" onPress={() => navigation.navigate('Test',{myParam: '03',})} /> </View> ); } const Stack = createNativeStackNavigator(); function App() { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Test" component={TestScreen} /> </Stack.Navigator> </NavigationContainer> ); } export default App;prueba.js
import React, { Component } from "react"; import { Text, View } from "react-native"; class Test extends Component { render() { const { navigation } = this.props; return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Test Screen</Text> <Button title="Test" onPress={() => navigation.navigate('Home')} /> </View> ); } } export default Test;Parece que fue un problema muy simple y lo descubrí yo mismo. Al código en Test.js le faltaba ' Botón ' en la declaración de importación. La forma correcta debería ser:
import { Button, Text, View } from "react-native";Es un error tonto, pero no es la primera vez que me pasa. Uso Visual Studio Code, que resalta las conexiones que faltan, pero parece que esto no funciona para algunos componentes. Sin mencionar que compila (empaquetado) sin problemas.
Sin embargo, el código funciona bien ahora.
Primero debe importar useNavigation en el archivo Test.js.
Como esto:
import { useNavigation } from "@react-navigation/core";
Luego tienes que usarlo y guardarlo en una variable como:
const navigation = useNavigation();
Ahora usa:
onPress={() => navigation.navigate('Home')};
Esto navegará a la otra pantalla.
Asegúrese de instalar cada biblioteca que use en su proyecto usando npm o yarn.