The Digital Mike

Existen dos formas de usar estilos externos en React Native. Primero, puede importar el archivo de la hoja de estilo a su proyecto y aplicarlo a su componente. En segundo lugar, puede usar estilos en línea en su código.

Ejemplo:

import React from 'react';
import { Text, View } from 'react-native';

const YourApp = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>
        Bienvenidos! 🎉
      </Text>
    </View>
  );
}

export default YourApp;

Los estilos nativos son la mejor manera de hacer que su aplicación React Native se vea y se sienta como una aplicación móvil nativa.

Los estilos nativos son independientes, por lo que puede usarlos con cualquier proyecto de React Native. No dependen de ninguna biblioteca externa, por lo que funcionarán en todas las plataformas compatibles con React Native.

CSS para React-Native está escrito en JavaScript. La sintaxis es un poco diferente del CSS utilizado en el desarrollo web. Es importante saber que los estilos no solo se aplican al componente sino también a los hijos de ese componente.

La biblioteca que pueden usar se llama react-native-css-transformer. Necesitaremos esta biblioteca porque nos permite escribir nuestro CSS en JavaScript y luego transformarlo en CSS válido en el momento de la compilación.

Un ejemplo tal y como se ve en la pagina de la librería, sera así.

Tu estilo se vera así, la manera regular:

.myClass {
  color: blue;
}
.myOtherClass {
  color: red;
}
.my-dashed-class {
  color: green;
}

Luego incluyes el fichero

import styles from "./tuestilo.css";

Y tu estilo va a lucir asi:

var styles = {
  myClass: {
    color: "blue"
  },
  myOtherClass: {
    color: "red"
  },
  "my-dashed-class": {
    color: "green"
  }
};

Luego puedes usar tu estilo en cualquier parte de tu proyecto:

<MyElement style={styles.myClass} />
or
<MyElement className={styles.myClass} />
or
<MyElement styleName="myClass my-dashed-class" />

Hay dos formas de teñir el texto en React Native. El primero es establecer el color del texto nativo en un color determinado mediante la propiedad TextColor en el componente Text.

La segunda forma es usar una biblioteca de terceros que le permita establecer un color específico en el componente Texto con una llamada a la API.

Los componentes nativos de React son una excelente manera de crear y mantener la interfaz de usuario en React. Son la mejor opción para aplicaciones de tamaño pequeño a mediano que no requieren la sobrecarga de Webpack u otras configuraciones avanzadas.