Introducción a la interfaz de usuario de React Native Elements

Introducción

React Native Elements es una biblioteca de estilos con componentes prediseñados que se basan en componentes de React Native. Cada uno de los componentes de React Native Elements está envuelto con el View /componente de React Native con estilos basados ​​en las propiedades que indica.

El objetivo principal de React Native Elements es construir sobre los componentes básicos de React Native para brindarte más flexibilidad y facilidad para crear temas para toda tu aplicación. Si alguna vez escribiste CSS para una aplicación completa, probablemente hayas encontrado formas de ahorrar tiempo y escribir las cosas una vez en lugar de hacerlo una y otra vez. El uso de React Native Elements te permite usar componentes prediseñados y personalizarlos o extenderlos para reutilizar las mismas propiedades.

Nota: A lo largo de este artículo, abreviaremos React Native Elements como RNE.

En este artículo, explorarás algunos de los componentes que ofrece React Native Elements. Podrás aplicar lo que aprende aquí a los demás componentes.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Un entorno de desarrollo local para Node.js. Sigue Cómo instalar Node.js y crear un entorno de desarrollo local.
• Puede resultar beneficioso estar familiarizado con la configuración de su entorno para crear un nuevo proyecto React Native y el uso de los simuladores de iOS o Android.
• Familiaridad con el uso de la sintaxis JSX en React Native.
• Alguna familiaridad con los componentes de React Native.

Este tutorial fue verificado con Node v16.4.0, npmv7.19.0, reactv16.13.1, react-nativev0.63.4 y react-native-elementsv3.4.2.

Configuración del proyecto

Primero, use create-react-native-apppara crear una nueva aplicación React Native:

npx create-react-native-app

Responda las indicaciones para crear un nuevo proyecto. Luego navegue hasta el directorio del nuevo proyecto.

Luego, instala react-native-elments:

npm install react-native-elements@3.4.2

Ahora que tenemos la biblioteca instalada, está lista para usar y podemos importar cualquier componente de ella de esta manera:

import { Text } from 'react-native-elements';

Por ejemplo, este código hará que el Textcomponente esté disponible para su uso.

Uso del Textcomponente

El componente Element de React Native Text /amplía el Text /componente de React Native con más accesorios para diseño.

Tiene tamaños de fuente preconfigurados, que puedes seleccionar usando h1, h2, h3o h4. Los tamaños de fuente correspondientes son 40, 34, 28y 22.

Hay una propiedad para cada tamaño de encabezado, como h1Style, h2Style, etc. Estas se aplican al contenedor que rodea al texto.

He aquí un ejemplo:

import React from 'react';import { SafeAreaView, StyleSheet } from 'react-native';import { Text } from 'react-native-elements';export default function App() {  return (    SafeAreaView      Text        h1        h1Style={styles.h1}              Your Heading      /Text    /SafeAreaView  );}const styles = StyleSheet.create({  h1: {    backgroundColor: '#00f',    padding: 10,  },});

La propiedad h1garantiza que todos nuestros encabezados principales tengan el mismo tamaño en toda la aplicación. Y h1Stylees para el contenedor que lo rodea si por alguna razón desea darle estilo al contenedor.

Para obtener más información, consulte la documentación oficial de Text.

Uso del Buttoncomponente

Como se mencionó anteriormente, cada componente de RNE ya está envuelto en un View /. Ese es el contenedor al que se le asignó el estilo h1styleen el Textcomponente anterior. Esto le libera de tener que agregar manualmente View /componentes del contenedor principal. Puede usar containerStylepara agregar estilos a este contenedor principal.

Tomemos este ejemplo como ejemplo:

import React from 'react';import { SafeAreaView } from 'react-native';import { Button } from 'react-native-elements';export default function App() {  return (    SafeAreaView      Button        containerStyle={{ height: 500 }}        buttonStyle={{ height: '100%' }}        title='button title'      /    /SafeAreaView  );}

En este código, el Viewcomponente dentro del RNE Button /tiene un estilo que le permite containerStyletener una altura de 500. Pero, si no incluye el buttonStyle={{height: '100%'}}, el botón conservaría su altura predeterminada. Solo Viewocuparía 500píxeles de la pantalla. Ahí es donde darle al buttonStyleelemento una altura de 100%ocupará toda la Viewaltura. El buttonStyleestilo del Buttonpropio. Encontrará que este patrón se sigue en casi todos los componentes de RNE.

Hay muchos otros estilos que se pueden aplicar a un botón. Es posible que hayas notado que este componente tiene como valor predeterminado TouchableOpacityen iOS y TouchableNativeFeedbackAndroid. Estos valores predeterminados se pueden cambiar con la TouchableComponentpropiedad:

TouchableComponent={TouchableHighlight}

Puede configurar el typebotón en "clear", "outline", o el valor predeterminado "solid":

• "solid"Es el valor predeterminado e incluye un fondo, incluso en iOS.
• "outline"De forma predeterminada, no tiene fondo, pero mantiene un contorno fino.
• "clear"El valor predeterminado es sin fondo ni contorno.

También puedes agregar el raisedaccesorio para darle a tu botón una apariencia elevada con una sombra de cuadro.

Hay muchas otras formas de agregar estilo a tu botón:

• También puedes configurar un loadingaccesorio para mostrar un indicador de carga en el botón y darle estilo.
• Puedes darle estilo al texto del título con titleStyle.
• disabledStyleTambién puedes configurar un accesorio para obtener una apariencia personalizada para personas deshabilitadas, así como un disabledTitleStyle.
• Por último, incluso puedes darle a tu botón un diseño de degradado lineal.

Para obtener más información, consulte la documentación oficial de Button.

Uso del Iconcomponente

Los iconos son posibles a través de react-native-vector-icons.

También puedes colocar un icono en el botón con la iconpropiedad. Esta es una propiedad en algunos de los componentes, donde puedes insertar el Iconcomponente o, alternativamente, un objeto. De manera predeterminada, el icono se centrará en el botón y, luego, se desplazará hacia la izquierda del texto si hay texto en la titlepropiedad. Puedes cambiar esto al lado derecho del texto con la iconRightpropiedad.

Dentro del Iconcomponente, la namepropiedad es importante: coincide con el nombre del ícono oficial y, si no se encuentra, solo verá un signo de interrogación en el lugar del ícono deseado.

Aquí está la lista completa de iconos compatibles. Cada sección tiene un encabezado que indica el typetipo de icono. Esto incluye "entypo", "feather"y "fontawesome". El diseño de los iconos suele ser diferente en cada caso type.

He aquí un ejemplo:

import React from 'react';import { SafeAreaView } from 'react-native';import { Button } from 'react-native-elements';export default function App() {  return (    SafeAreaView      Button        icon={{ name: "mail", size: 15, type: 'entypo', color: "black" }}        iconRight             /    /SafeAreaView  );}

Este código dará como resultado lo siguiente:

También puedes reemplazar el objeto en el ejemplo anterior con lo siguiente:

import React from 'react';import { SafeAreaView } from 'react-native';import { Button, Icon } from 'react-native-elements';export default function App() {  return (    SafeAreaView      Button        icon={Icon name="mail" size={15} type="entypo" color="white" /}        iconRight             /    /SafeAreaView  );}

Para ello se utiliza el Icon /componente RNE y cada vez que se utilizan íconos en RNE, se puede implementar de cualquier manera.

Nuevamente, todos los componentes de React Native Elements están envueltos en un View, por lo que una de las propiedades con las que generalmente puedes contar es containerStyle– que se aplica aquí para Icon /. Luego, en lugar de buttonStyle, puedes darle estilo al ícono en sí con iconStyle. Por supuesto, esto solo es necesario si deseas darle estilo más allá de las propiedades integradas. Ahora, es importante comprender la distinción: puedes darle estilo al contenedor de íconos con una propiedad en el padre Button /con iconContainerStyle, que sería lo mismo que la containerStylepropiedad dentro del Icon /componente.

También puedes hacer que los iconos se parezcan a los botones, usando el reverseelemento prop. Hay un borde circular detrás de los iconos, pero no es visible de forma predeterminada. Con reverse, tu icono se vuelve blanco (a menos que lo configura específicamente con reverseColor), mientras que el color de fondo del círculo se rellena con lo que colorhayas especificado (el valor predeterminado es negro). Si le das un raisedelemento prop a tu icono, el fondo del círculo se mostrará, con un relleno blanco predeterminado, a menos que reversetambién lo hayas hecho. El fondo del círculo recibirá la raisedsombra del cuadro, no el icono en sí.

Para obtener más información, consulte la documentación oficial de Icon.

Uso de los componentes SearchBaryInput

Un componente muy útil en RNE es el SearchBar /. Comienza con todas las propiedades TextInput /que tendría un estándar, al igual que el Input /componente RNE, pero agrega algunas propiedades de estilo. Además de algunas diferencias de nombre, SearchBar /es en gran medida solo una versión especializada del RNE Input /. De entrada, SearchBar /tiene un ícono de lupa en el extremo izquierdo (este es el searchIconcomponente predeterminado) y un fondo oscuro. El searchIconcomponente es básicamente el leftIconcomponente cuando se usa el componente más genérico Input /.

Cuando comiences a escribir, verás una x en el extremo derecho. Esta es tu clearIconpropiedad predeterminada, que sería equivalente a la rightIconpropiedad que usas cuando usas Input /un componente. Cuando presionas el ícono x , se borra el texto, lo que se puede manejar con la onClearpropiedad de devolución de llamada.

Una cosa importante que hay que recordar es que los íconos vienen con contenedores a los que se les puede aplicar estilo: puedes aplicar estilo con leftIconContainerStyleo rightIconContainerStyle. Esto sería aplicar estilo al contenedor del ícono en el SearchBar /componente, no al ícono Icon /en sí.

El botón cancelar es un poco más complicado, pero una forma de que aparece es así:

import React from 'react';import { SafeAreaView } from 'react-native';import { SearchBar } from 'react-native-elements';export default class App extends React.Component {  state = {    search: '',  };  updateSearch = (search) = {    this.setState({ search });  };  render() {    const { search } = this.state;    return (      SafeAreaView        SearchBar          platform='ios'          cancelButtonTitle='cancel'          onChangeText={(search) = { this.updateSearch(search) }}          value={search}        /      /SafeAreaView    );  }}

Este código dará como resultado lo siguiente:

Si configura la plataforma en 'ios'y el cancelButtonTitletexto que desee, el botón aparecerá en ambas plataformas cuando SearchBaresté enfocado (comportamiento predeterminado). Activa una onCanceldevolución de llamada. También verá que el tema oscuro predeterminado se desactivará al agregar este botón de cancelación.

En el SearchBarcomponente, puedes configurarlo View /con containerStyle, y SearchBaraquí tiene la propiedad inputContainerStylepara darle estilo a un contenedor interno alrededor de TextInputdentro. Para darle a TextInput, el cuadro donde escribe tu texto, usa inputStyle– esto le da estilo al contenedor de texto, pero no incluye los íconos. El inputContainerStylecontenedor sí incluye los íconos. Son los mismos con SearchBar /y Input /– verás los SearchBar /valores predeterminados con relleno en containerStyley bordes redondeados en inputContainerStyle.

Una diferencia entre SearchBar /y Input /es que la búsqueda parece requerir la configuración de, valuecomo se ve en el ejemplo anterior. Sin ella y sin la onChangeTextdevolución de llamada que actualiza el valor, no le permite escribir nada. Esto no es así en el caso de Input /. Además, con el Input /componente, puede configurar una etiqueta y un mensaje de error, cada uno de ellos estará dentro del . externo View /.

Conclusión

En este artículo, explorará algunos de los componentes proporcionados por React Native Elements: Text, Button, Icon, SearchBary Input.

React Native Elements está repleto de componentes y formas de personalizar tu aplicación. Hay muchas propiedades predefinidas que pueden ahorrarte mucho tiempo y evitarte horas de diseño manual y de mover elementos píxel por píxel.

Hay mucho más de lo que cubrimos aquí, como un buen Rating /componente, pero con la comprensión básica aquí, debería poder comprender cómo funciona el resto.

La documentación oficial es un excelente lugar para revisar sus componentes y encontrar qué accesorios puede usar en cada componente y cómo implementarlos.