React Native Style

Com o React Native, você não usa um idioma ou sintaxe especial para definir estilos. Você apenas estiliza seu aplicativo usando JavaScript. Todos os componentes principais aceitam um suporte nomeado style. Os nomes e valores de estilo geralmente correspondem à maneira como o CSS funciona na Web, exceto que os nomes são escritos usando revestimento de camelo, por exemplo, em backgroundColorvez de background-color.

stylesuporte pode ser um objeto JavaScript antigo simples. Esse é o mais simples e o que geralmente usamos como exemplo de código. Você também pode passar uma matriz de estilos – o último estilo da matriz tem precedência, portanto, você pode usá-lo para herdar estilos.

À medida que um componente cresce em complexidade, geralmente é mais fácil usar StyleSheet.createpara definir vários estilos em um único local. Aqui está um exemplo:

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

const styles = StyleSheet.create({
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigBlue}>just bigBlue</Text>
        <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
        <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
      </View>
    );
  }
}

Um padrão comum é fazer com que seu componente aceite um stylesuporte que, por sua vez, é usado para estilizar subcomponentes. Você pode usar isso para criar estilos “em cascata” da maneira que eles fazem no CSS.

Existem muito mais maneiras de personalizar o estilo do texto. Confira a referência do componente de texto para obter uma lista completa.

Agora você pode deixar seu texto bonito. O próximo passo para se tornar um mestre de estilos é aprender a controlar o tamanho do componente .

Deixe uma resposta