Las bibliotecas de componentes son una colección de código personalizable y reutilizable que se puede hacer para adaptarse al patrón de diseño de una aplicación específica. Ayudan a mantener un diseño uniforme en todas las plataformas y aceleran el proceso de desarrollo.
Aquí aprenderá a usar la biblioteca de componentes React Native Elements al crear su próxima aplicación React Native.
¿Qué son los elementos nativos de React?
React Native Elements (RNE) es un esfuerzo de código abierto de los desarrolladores de React Native para crear una biblioteca de componentes que puede ser útil al crear aplicaciones web, iOS y Android. A diferencia de muchos otras bibliotecas de componentes React Native, RNE admite la sintaxis de TypeScript.
La biblioteca consta de más de 30 componentes que se centran en la estructura de los componentes.
Instalación de Reactive Native Elements con React Native CLI
Las siguientes instrucciones son para instalar React Native Elements en un proyecto creado con React Native cli.
Instale React Native Elements en su aplicación React Native ejecutando:
instalar npm @rneui/themed @rneui/base
También debe instalar react-native-vector-icons y safe-area-context:
npm instalar reaccionar-nativo-los iconos vectoriales reaccionan-nativo-seguro-área-contexto
Cómo instalar React Native Elements en un proyecto Expo
Para instalar React Native Elements en un sistema existente exposición proyecto, instale el paquete y reaccione-native-safe-area-context:
añadir hilo @rneui/themed @rneui/reacción base-nativo-contexto de área segura
Mantenga un administrador de paquetes como npm o yarn mientras instala paquetes para evitar el riesgo de conflictos de dependencia.
Los proyectos creados con expo cli tienen iconos de vectores nativos de reacción instalados de forma predeterminada, por lo que no es necesario que los instale.
Diseño de componentes de Single React Native Elements
Todos los componentes disponibles a través de RNE toman varios accesorios para diseñar el componente y el contenedor del componente.
El contenedor del componente es un básico. etiqueta que envuelve una etiqueta de componente, como la. El la etiqueta es invencible alrededor del componente y toma un containerStyle prop para aplicar estilos de vista.
Un componente puede recibir accesorios de estilo predeterminados como color, tipo, y tamaño. Un componente también puede recibir un accesorio de estilo personalizado único para manejar los estilos del componente.
Todos estos son estilos externos para el componente.
Por ejemplo, estilizar el Botón componente:
importar { Vista } de "reaccionar-nativo";
importar { Botón } de "@rneui/temática";
constante MiComponente = () => {
devolver (
<Vista>
<Botón
buttonStyle={{ color de fondo: "gris" }}
containerStyle={{ ancho: 150 }}
>
Botón Sólido
</Button>
<Botón
tipo ="describir"
containerStyle={{ ancho: 150, margen: 10 }}
titulo="Botón de contorno"
/>
</View>
);
}
El código anterior muestra cómo puede aplicar estilos a un componente Button. One Button utiliza un valor predeterminado tipo prop, y el otro usa la costumbre estilo de boton apuntalar. Ambos botones también utilizan el containerStyle prop para agregar estilos de vista.
Creación de temas para componentes de React Native Elements
La creación de temas para los componentes de RNE es útil cuando desea aplicar un estilo a cada instancia de esos componentes. Con los temas, personalizar sus componentes para adaptarlos al patrón de diseño deseado se convierte en una tarea fácil.
RNE ofrece una crearTema() Función para dar estilo a los componentes. Esta función mantendrá los estilos de tema que anulan los estilos internos o predeterminados de cada componente.
Para crear un tema, llame crearTema() y pase los estilos de tema deseados como un argumento de función:
importar { Proveedor de temas, crear tema } de '@rneui/temática';
constante tema = crearTema({
componentes: {
Botón: {
estilo contenedor: {
margen: 10,
},
estilo del título: {
color: "negro",
},
},
},
});
El proveedor de temas aplicará estilos a cualquier componente envuelto dentro de él.
El proveedor acepta un tema prop que se establece en el tema creado anteriormente:
<ThemeProvider tema={tema}>
<Título del botón ="Botón temático" />
</ThemeProvider>
<Título del botón ="Botón Normal" />
Los estilos de tema anulan los estilos de componentes internos o predeterminados, pero no anularán un estilo de componente externo.
El orden de precedencia de RNE coloca los estilos externos en la parte superior de la jerarquía.
Ejemplo:
// Tema
constante tema = crearTema({
componentes: {
Botón: {
estilo contenedor: {
margen: 10,
color de fondo: "rojo",
},
},
},
});
//Component
<ThemeProvider tema={tema}>
<Título del botón ="Botón temático" color={"secundario"}/>
</ThemeProvider>
En el código anterior, el color de fondo de la Botón el componente será secundario, que es de color verde en oposición al estilo de tema rojo.
A tema El objeto se envía con RNE y proporciona numerosos valores de color predeterminados listos para usar. RNE ofrece varias opciones como la TemaConsumidor componente, usarTema() gancho, y hacerEstilos() generador de ganchos para acceder al tema objeto.
El TemaConsumidor componente envolverá sus componentes renderizados con una función anónima. Esta función anónima toma tema como apoyo
Puede acceder a los valores del tema con un estilo apuntalar:
importar Reaccionar de 'reaccionar';
importar { Botón } de 'reaccionar-nativo';
importar {TemaConsumidor} de '@rneui/temática';
constante MiComponente = () => (
<TemaConsumidor>
{({ tema }) => (
<Título del botón ="TemaConsumidor" estilo = {{ color: tema.colores.principal }} />
)}
</ThemeConsumer>
)
Como alternativa, puede utilizar el usarTema() gancho para acceder al tema dentro de un componente.
Por ejemplo:
importar Reaccionar de 'reaccionar';
importar { Botón } de 'reaccionar-nativo';
importar { usarTema } de '@rneui/temática';constante MiComponente = () => {
constante { tema } = usarTema();
devolver (
<Ver estilo={estilos.contenedor}>
<Título del botón ="usarTema" estilo = {{ color: tema.colores.principal }}/>
</View>
);
};
El hacerEstilos() El generador de ganchos es similar a usar una hoja de estilo para definir estilos. Al igual que la hoja de estilo, separa cualquier estilo del exterior del componente renderizado. Haciendo referencia a la tema objeto dentro de un accesorio de estilo de componentes.
Ampliación de temas con TypeScript
RNE admite declaraciones de TypeScript en su aplicación, lo que permite a los desarrolladores aprovechar los beneficios de usar el lenguaje TypeScript.
con mecanografiados declaración de fusión, puede ampliar las definiciones de temas para agregar colores y accesorios personalizados para los componentes predeterminados y personalizados de RNE.
Para extender los colores dentro del objeto del tema, creará un objeto separado mecanografiado.ts archivar y declarar el módulo @rneui/temática dentro del archivo.
Luego puede continuar para agregar sus colores personalizados y especificar su tipo esperado:
// **Mecanografiado.ts**importar '@rneui/themed';
declarar módulo '@rneui/temática' {
exportar interfazColores{
luzprimaria: cadena;
luz secundaria: cadena;
}
}
Con este módulo, puede pasar sus colores personalizados como valores al crear un tema:
constante tema = crearTema({
colores: {
luz primaria: "",
luz secundaria: ""
},
})
Ahora los colores personalizados son parte de su objeto de tema y se puede acceder a ellos usando Proveedor de temas, Consumidor de temas, o el usarTema() gancho.
Componentes RNE vs. Reaccionar componentes nativos
Las bibliotecas de componentes como React Native Elements son una excelente manera de poner en marcha una aplicación rápidamente. Mantienen su enfoque en la estructura de la aplicación en lugar de en los detalles del diseño. El uso de componentes RNE sobre componentes React Native debe guiarse principalmente por el enfoque de su aplicación y cuánto tiempo de desarrollo tiene.
