React Native Styling: componentes con estilo, diseños de Flexbox y más

React Native proporciona una API para crear hojas de estilo y diseñar sus componentes: StyleSheet.

import React, { Component } from 'react'; import { StyleSheet, View, Text } from 'react-native'; export default class App extends Component { render () { return (  I am a header! I am some blue text.  ); } } const styles = StyleSheet.create({ header: { fontSize: 20 }, text: { color: 'blue' } });

Si bien las hojas de estilo CSS normales no son válidas, el superconjunto de CSS de React Native es muy similar al CSS tradicional.

Muchas de las propiedades CSS (por ejemplo color, height, top, right, bottom, left) son los mismos en StyleSheet. Cualquier propiedad CSS que tenga guiones (por ejemplo font-size, background-color) debe cambiarse a camelCase (por ejemplo fontSize, backgroundColor).

No todas las propiedades CSS existen en StyleSheet. Dado que no existe un concepto real de desplazamiento en dispositivos móviles, las propiedades de desplazamiento de CSS no existen en React Native. En cambio, React Native proporciona componentes táctiles que responden a eventos táctiles.

Los estilos tampoco se heredan como en CSS tradicional. En la mayoría de los casos, debe declarar el estilo de cada componente.

Diseños de caja flexible

React Native usa una implementación de flexbox similar al estándar web. De forma predeterminada, los elementos de la vista se establecerán en display: flex.

Si no desea utilizar flexbox, también puede organizar los componentes de React Native mediante relativeo absoluteposicionamiento.

Flexbox en React Native tiene como valor predeterminado flexDirection: column, en lugar de flex-direction: row(estándar web). El columnvalor muestra elementos flexibles verticalmente, lo que se adapta a dispositivos móviles en orientación vertical.

Para obtener más información sobre flexbox, visite esta guía detallada sobre CSS-Tricks y un enfoque de aprendizaje gamificado con Flexbox Froggy.

Componentes con estilo

Incluir muchos estilos en un archivo con un componente no siempre es fácil de mantener. Los componentes con estilo pueden resolver este problema.

Por ejemplo, un componente Button se puede utilizar en varios lugares de una aplicación. Copiar y pegar el objeto de estilo con cada instancia de Button sería ineficaz. En su lugar, cree un componente Botón reutilizable con estilo:

import React from 'react'; import { Text, TouchableOpacity } from 'react-native'; const Button = ({ onPress, children }) => { const { buttonStyle, textStyle } = styles; return (   {children}   ); }; export default Button; const styles = { textStyle: { alignSelf: 'center', color: '#336633', fontSize: 16, fontWeight: '600', paddingTop: 10, paddingBottom: 10 }, buttonStyle: { backgroundColor: '#fff', borderWidth: 1, borderColor: '#336633', paddingTop: 4, paddingBottom: 4, paddingRight: 25, paddingLeft: 25, marginTop: 10, width: 300 } };

El componente Botón con estilo se puede importar y utilizar fácilmente en la aplicación sin declarar repetidamente el objeto de estilo:

import React, { Component } from 'react'; import { TextInput, View } from 'react-native'; import Button from './styling/Button'; export default class Login extends Component { render() { return (    Log In  ); } }

Bibliotecas para estilizar

Hay algunas bibliotecas populares para diseñar React Native. Algunos de ellos ofrecen funciones similares a Bootstrap, incluidos formularios predeterminados, estilos de botones y opciones de diseño de página.

Una de las bibliotecas más populares es la de componentes con estilo. Hay muchos otros que puede encontrar en npm y GitHub para probarlos usted mismo.