Crear una pantalla (Screen) con React Native

Tiempo de lectura: 2 minutos

Las pantallas en React Native funcionan como propios objetos que se construyen con distintos componentes. En este ejemplo voy a enseñaros cómo crear un Screen.

Primero creamos una carpeta screens dónde vamos a meter las pantallas y dentro de esta carpeta creamos un archivo .js llamado Login.js.

Dentro del archivo Login.js vamos a tener lo siguiente:

import React from "react";
import { Text } from "react-native";

//Componente boton
const Login = () => {

    return (
            <Text>"Pantalla Login"</Text>   
    )
};

export default Login;

Cómo veis es una copia exacta de App.js, esto es un screen.

Y para poder utilizarlo en otra pantalla, por ejemplo cargarla dentro de App.js tendremos que añadir lo siguiente en nuestro archivo App.js

import React from "react";
import { View } from "react-native";

//Importar pantallas
import Login from './screens/Login';

//Crear un componente llamado APP
const App = () => {

    return (
        <View >
            <Login />
        </View>)
};

export default App;

Cómo veis lo primero que hicimos es importar la pantalla que hemos creado:

import Login from './screens/Login';

Una vez importada podemos utilizarla dentro del render const App para ello la añadimos de la siguiente forma:

<Login />

Y con esto ya nos carga dentro de App.js nuestra pantalla.

Esto es importante, ya que además cada pantalla va a tener su diseño y estilos dentro del propio objeto.