Contenido
Continuamos nuestro curso de React Native con este artículo sobre la parte gráfica del mismo. Ya hemos definido anteriormente un proyecto básico en el artículo anterior. En el presente artículo vamos a ver que es JSX y los componentes en React Native; y como las usaremos en nuestros proyectos de apps.
Componentes en React Native
Empezaremos por ver que son los componentes en React Native. Cuando estamos desarrollando una aplicación de smartphone, vemos una serie de elementos gráficos y pantallas sobre las que podemos actuar. Todos estos elementos gráficos son los que nos sirven para mostrar contenido en aplicaciones para smartphone. Bien, podríamos ver cada uno de estos elementos como un componente: un botón, una pantalla, un texto, etc.
Todos estos elementos, desarrollados por nosotros o por un tercero, se buscan que sean reutilizables. Es decir, queremos que cualquier componente pueda usarse en otro lugar. Así, si creamos una pantalla de login a un sistema podremos usarla como un componente en cualquier aplicación de smartphone.
¿Qué es JSX?
Lo primero que debemos aprender es que a la hora de realizar el renderizado de componentes y por lo tanto mostrar el contenido de nuestra aplicación vamos a trabajar con JSX. Pero ¿qué es exactamente? Pues bien, en React y React Native se acepta el hecho de que la lógica de interfaz de usuario y el renderizado de la interfaz están intrínsecamente unidos. Es por ello, que se ha definido una extensión al lenguaje de programación Javascript que permite utilizar elementos de marcado de interfaces. Por ejemplo el siguiente código:
const element = <h1>Hello, world!</h1>;El código anterior no es ni una cadena de Javascript, ni un código HTML. Este código define un elemento que podremos utilizar en el renderizado de nuestra interfaz
Las pantallas de una aplicación, nuestro primer componente
En cualquier aplicación de smartphone podemos ver que está compuesta por una serie de pantallas por las que podemos ir navegando e interactuando. Estas pantallas serán los primeros componentes que vamos a diseñar en una app.
Estas pantallas como bien hemos dicho, serán componentes de nuestra aplicación. Para definirlas, crearemos un fichero de Javascript para cada uno de las pantallas que queramos definir en nuestra aplicación para smartphone.
Así en nuestro proyecto que tenemos definidor en Visual Studio Code vamos a crear una nueva carpeta con las pantallas de navegación que vamos a usar. Obteniendo lo siguiente:
Como podemos observar en la figura anterior, vamos a tener dos pantallas de ejemplo en nuestra aplicación. En la primera pantalla «Main.js», vamos a definir los elementos principales a mostrar en la misma. Así el código que definimos es el siguiente:
import React from 'react';
import { Text, View } from 'react-native';
export default function Main() {
return (
<View>
<Text>Main ...</Text>
</View>
);
}
En el código anterior, importamos React y desde «react-native» usamos el componente vista y texto. El componente View lo usaremos como continente de los demás componentes a mostrar. Por otro lado posicionamos un componente de tipo Text con el texto «Main». Todo ello lo definimos como valor de vuelta en una función que se exporta por defecto y cuyo nombre es Main. Como vemos la función que devuelve el componente se denomina con el mismo nombre que el fichero Javascript. Esta será la forma habitual de definir una vista para nuestra aplicación móvil.
Por otro lado, vamos a definir una vista con las configuración de nuestra aplicación. Esta vista la definimos en un fichero llamado «Settings.js». El contenido del fichero es el que aparece a continuación:
import React from 'react';
import { Text, View } from 'react-native';
export default function Settings() {
return (
<View>
<Text>Settings ...</Text>
</View>
);
}
Como vemos, realizamos lo mismo que en el caso anterior. Devolvemos una vista con el componente Text con el texto «Settings …». Esto será encapsulado en una función que se exporta por defecto y cuyo nombre es Settings.
Como puedes haber visto en muchas aplicaciones para móviles, existe un menú normalmente en la parte inferior de la aplicación que permite navegar entre diferentes vistas o pantallas. Esto es el menú de navegación. En este apartado vamos a ver como usarlo en React Native con React Navigation.
Lo primero que hacemos será instalar el plugin dentro de nuestro proyecto. En la web de React Navigation vemos los pasos que deberemos seguir. Para ello ejecutamos:
npm install @react-navigation/native@^5.xCon el comando anterior instalamos React Navigation en nuestro proyecto, usando la última versión estable de la serie 5.x.
A continuación, nos indican que debemos instalar las dependencias para nuestro proyecto usando expo si nuestro proyecto de app lo uso. Nuestra aplicación está basada en expo, por lo que a continuación ejecutamos:
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-viewCon esto estamos instalando todas las dependencias necesarias para usar React Navigation en nuestra aplicación. Puesto que vamos a usar algunos elementos e iconos que pertenecen a React Native Elementents, tendremos que instalarlo en nuestro proyecto. Para ello lo hacemos con:
npm install react-native-elementsCon esto ya tenemos instalado todas las dependencias que vamos a necesitar.
Para iniciar la creación del sistema de navegación vamos a crear un directorio «navigations» dónde definiremos la navegación. En este directorio creamos un componente Navigation dentro de un fichero llamado «Navigation.js». El contenido del componente será el siguiente:
import React from "react";
import {NavigationContainer} from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Icon } from "react-native-elements";
import MainStack from "./MainStack";
import SettingsStack from "./SettingsStack";
const Tab = createBottomTabNavigator();
export default function Navigation() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="main"
tabBarOptions={{
inactiveTintColor: "#646464",
activeTintColor: "#00a680"
}}
screenOptions={({route }) => ({
tabBarIcon: ({color}) => screenOptions(route, color),
})}
>
<Tab.Screen
name="main"
component={MainStack}
options={{title: "Principal"}}
/>
<Tab.Screen
name="settings"
component={SettingsStack}
options={{title: "Ajustes"}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
function screenOptions(route, color) {
let iconName;
switch (route.name) {
case "main":
iconName = "blur-radial";
break;
case "settings":
iconName = "cog-outline";
break;
default:
break;
}
return (
<Icon type="material-community" name={iconName} size={22} color={color} />
);
}En el fichero vamos a importar React, NavigationContainer que usaremos como contenedor principal de nuestro sistema de navegación. También importaremos el método createBottomTabNavigator para crear el sistema de navegación en la parte inferior de la pantalla. Importaremos también el sistema de iconos (Icon) desde react-native-elements. Por último importaremos los stacks que serán los elementos dónde se colocarán nuestras vistas dentro del sistema de navegación.
Dentro de la función por defecto devolveremos un componente NavigationContainer que contiene el componente de navegación Tab.Navigator. Este componente tiene definidos los siguientes atributos:
- initialRouteName: Pestaña inicial de nuestro sistema de navegación.
- tabBarOptions: Opciones gráficas de las pestañas (inactiveTintColor color de la pestaña inactivo, activeTintColor color de la pestaña activa.
- screenOptions: Aquí definimos el icono que se usará en la pestaña y el color.
Además definiremos una pestaña usando el componente Tab.Screen. Para cada pestaña definimos un nombre usando el atributo name, el componente que se usará dentro de la pestaña (una stack) y opciones (options).
Por último, hemos creado una función screenOptions que devolverá un componente Icon que indica el icono que usaremos en la pestaña.
Como hemos mencionado anteriormente debemos crear una stacks para cada una de las pestañas. Por ejemplo podemos mostrar la stack MainStack:
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import Main from "../screens/Main";
const Stack = createStackNavigator();
export default function MainStack() {
return (
<Stack.Navigator>
<Stack.Screen name="main" component={Main} options={{title: "Principal"}}/>
</Stack.Navigator>
);
}En el código vemos que importamos React, createStackNavigator y la pantalla de Main que definimos al principio. Creamos el stack con el método createStackNavigator que hemos importado anteriormente. La función por defecto del componente devolverá un componente Stack.Navigator que contendrá una pantalla Stack.Screen con los atributos:
- name: Nombre del stack.
- component: Nombre del componente que usará para mostrar el contenido.
- options: Opciones del stack, por ejemplo título de la pestaña (title).
Integrando todo
Por último integramos todo en el fichero principal de nuestra aplicación App.js. El contenido será el siguiente:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Navigation from './navigations/Navigation';
export default function App() {
return (
<Navigation />
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
En el código ahora importamos el componente Navigation de Navigation.js y ahora lo devolvemos en la función por defecto que hemos definido. Con todo esto conseguiremos obtener una aplicación similar a la que aparece en la imagen siguiente:
Resumiendo
Hemos estado viendo una introducción acerca de las pantallas que podemos definir para crear nuestra aplicación. Estas pantallas son las diferentes vistas que construyen una aplicación de móvil. Además hemos creado un sistema de navegación entre las diferentes pantallas de la aplicación. Como añadido, hemos usado el componente Icon de la librería de componentes react-native-elements. En los sucesivos artículos usaremos otros componentes de React Native y react-native-elements.
Si has llegado hasta aquí y tienes alguna sugerencia no dudes en escribir en el formulario de más abajo. También puedes seguir leyendo otros artículos del presente curso. El código usado en este artículo y en el curso lo puedes consultar en nuestro repositorio de código:
Sugerencias
