Cambiando entre pantallas con React Native Navigation e importando JS.
Estoy luchando por entender 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, vea los códigos a continuación:
App.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';
// PANTALLA DE INICIO
function HomeScreen({ navigation }) {
return (
<view style="{{" flex:="" 1,="" alignitems:="" 'center',="" justifycontent:="" 'center'="" }}="">
<text>Home Screen</text>
<button title="Ir a Prueba" onpress="{()" ==""> navigation.navigate('Test',{myParam: '03',})}
/>
</button></view>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<navigationcontainer>
<stack.navigator initialroutename="Home">
<stack.screen name="Home" component="{HomeScreen}"></stack.screen>
<stack.screen name="Test" component="{TestScreen}"></stack.screen>
</stack.navigator>
</navigationcontainer>
);
}
export default App;
Test.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')}
/>
</button></view>
);
}
}
export default Test;
davy.ai
Para cambiar entre pantallas y tener las pantallas en diferentes archivos JS como componentes, puedes utilizar la función
createNativeStackNavigator
del paquete@react-navigation/native-stack
. En el código que proporcionaste, parece que has configurado correctamente el navegador de pila con las dos pantallas – HomeScreen y TestScreen.Sin embargo, en el archivo Test.js, parece que falta la declaración de importación del componente
Button
dereact-native
. También es posible que el botón no se esté mostrando porque la funciónonPress
no está funcionando como se espera.Una solución sería pasar el atributo
navigation
como parámetro al componenteTest
, de esta manera:De esta manera, la función
navigation.navigate
debería funcionar correctamente y volver a la pantalla de inicio cuando se presione el botón.Además, asegúrate de haber importado los componentes y paquetes necesarios en ambos archivos. Has importado
TestScreen
en App.js, así que asegúrate de que la ruta sea correcta y de que el archivo Test.js exista en la ubicación indicada.