React Native - Estilo

Hay un par de formas de diseñar sus elementos en React Native.

Puedes usar el stylepropiedad para agregar los estilos en línea. Sin embargo, esta no es la mejor práctica porque puede ser difícil leer el código.

En este capítulo, usaremos el Stylesheet para peinar.

Componente contenedor

En esta sección, simplificaremos nuestro componente contenedor de nuestro capítulo anterior.

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {
   state = {
      myState: 'This is my state'
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState}/>
         </View>
      );
   }
}

Componente de presentación

En el siguiente ejemplo, importaremos el StyleSheet. En la parte inferior del archivo, crearemos nuestra hoja de estilo y la asignaremos alstylesconstante. Tenga en cuenta que nuestros estilos están encamelCase y no usamos px o% para peinar.

Para aplicar estilos a nuestro texto, necesitamos agregar style = {styles.myText} propiedad a la Text elemento.

PresentationalComponent.js

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

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text style = {styles.myState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

const styles = StyleSheet.create ({
   myState: {
      marginTop: 20,
      textAlign: 'center',
      color: 'blue',
      fontWeight: 'bold',
      fontSize: 20
   }
})

Cuando ejecutemos la aplicación, recibiremos el siguiente resultado.