Crear un componente en React Native

Tiempo de lectura: 3 minutos

React Native funciona con componentes, ¿Qué quiere decir esto? Pues que cada elemento representa un objeto con su vista, propiedades y métodos. Un objeto es una caja negra, dónde tú introduces una entrada y devuelve una salida, independientemente de lo que contenga o no.

Os voy a explicar cómo crear un componente de ejemplo en React Native.

Lo primero que tenemos que hacer es ir a nuestra App.js

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

//Componente boton
const App = () => {
    return (
       <Text>Hola Mundo</Text>
       <Button title="Iniciar" />
    )
};

export default App ;

En este caso, he creado un texto que pone Hola Mundo y un botón que pone Iniciar.

Ahora voy a crear un componente que representará el objeto botón, que vamos a personalizar e importar dentro de nuestra App.

Para ello vamos a crear una carpeta llamada componentes y dentro de ella Boton.js

Ahora abrimos Boton.js y añadimos lo siguiente:

import React from "react";
import { StyleSheet, Button } from "react-native";

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

    return (
        <Button style={styles.boton} title="Iniciar" />
    )
};

export default Boton;

const styles = StyleSheet.create({
    boton: {
        backgroundColor: '#2145E6',
    },
});

En este caso hemos creado el botón y le hemos aplicado un estilo que añade un color de fondo azul.

Ahora queremos que nuestro botón tenga un texto personalizado y que además pueda invocar a una función cuándo pulsemos en él. Para ello vamos a hacer unas modificaciones:

import React from "react";
import { StyleSheet, Button } from "react-native";

//Componente boton
const Boton = (props) => {

    //Parametros de constructor se pasan por props
    const { texto, onPress } = props;

    return (
        <Button style={styles.boton} onPress={onPress} title= {texto} ></Button>
    )
};

export default Boton;

const styles = StyleSheet.create({
    boton: {
        backgroundColor: '#2145E6',
    },
});

Primero pasamos por constructor la variable props dónde vamos a añadir mediante propiedades del botón los atributos que queramos pasarle. const Boton = (props) => {

Después hemos añadido una constante objeto que tiene dos parámetros, texto y onPress.

const { texto, onPress } = props;

Estos parámetros los recibe desde las propiedades del componente, cuándo lo añadamos a una vista, por ejemplo:

Con esto podremos hacer que el botón tenga las propiedades que queramos al añadirlo a distintas pantallas (cómo cuando hacemos un new Objeto(texto, press) en Java).

onPress={onPress} title= {texto}

Finalmente, he añadido las variables poniendo {onPress} y {texto} para hacer referencia a las propiedades que se le pasa.

Con todo esto ya tenemos creado nuestro componente, ahora solo tenemos que añadirlo a la visa de App.js de la siguiente forma:

1. Importamos el componente:
   import Boton from '../componentes/Boton';
2. Añadimos el componente a la vista:
   <Boton />
3. Pasamos los atributos que hemos decidido:
   <Boton texto=»Iniciar» onPress =»funcionPulsar» />

Y ya nos construye el componente.

Este es el código de App.js con los cambios realizados:

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

//importar el componente
import Boton from '../componentes/Boton';

//Componente boton
const App = () => {
    return (
       <Text>Hola Mundo</Text>
       <Boton texto="Iniciar" onPress ="funcionPulsar" />
    )
};
//Funcion que se invoca al pulsar
function funcionPulsar(){
   alert("pulsar");
}

export default App ;