es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cambiando entre pantallas con React Native Navigation e importando JS.

27 Jul, 2023 Programación

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;
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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 de react-native. También es posible que el botón no se esté mostrando porque la función onPress no está funcionando como se espera.

    Una solución sería pasar el atributo navigation como parámetro al componente Test, de esta manera:

    function Test({ navigation }) {
    return (
        <view style="{{" flex:="" 1,="" alignitems:="" 'center',="" justifycontent:="" 'center'="" }}="">
            <text>Pantalla de Prueba</text>
            <button title="Volver a la pantalla de inicio" onpress="{()" ==""> navigation.navigate('Home')}
            />
        </button></view>
    );
}

    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.

Comments are closed.