freeCodeCamp/guide/portuguese/react-native/styling/index.md

title	localeTitle
Styling	Styling

Reagir Nativo - Estilo

O React Native fornece uma API para criar folhas de estilo e estilizar seus componentes: StyleSheet .

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

Embora as folhas de estilo CSS regulares não sejam válidas, o superconjunto de CSS do React Native é muito semelhante ao CSS tradicional. Muitas propriedades CSS (por exemplo, color , height , top , right , bottom , left ) são as mesmas em StyleSheet. Qualquer propriedade CSS que tenha hifens (por exemplo font-size , background-color ) deve ser alterada para camelCase (por exemplo, fontSize , backgroundColor ).

Nem todas as propriedades CSS existem no StyleSheet. Como não existe um conceito verdadeiro de pairar em dispositivos móveis, as propriedades de foco do CSS não existem no React Native. Em vez disso, o React Native fornece componentes tocáveis que respondem a eventos de toque.

Os estilos também não são herdados como no CSS tradicional. Na maioria dos casos, você deve declarar o estilo de cada componente.

Layouts Flexbox

O Reagir Native usa uma implementação do flexbox semelhante ao padrão da web. Por padrão, os itens na exibição serão configurados para display: flex .

Se você não quiser usar o flexbox, também é possível organizar componentes React Native por meio de posicionamento relative ou absolute .

Flexbox in React Native defaults para flexDirection: column , em vez de flex-direction: row (padrão da web). O valor da column exibe itens flexíveis verticalmente, que acomodam dispositivos móveis na orientação retrato.

Para saber mais sobre o flexbox, visite este guia detalhado sobre CSS-Tricks e uma abordagem de aprendizagem gamificada com o Flexbox Froggy .

Componentes estilizados

Incluir muitos estilos em um arquivo com um componente nem sempre é fácil de manter. Componentes com estilo podem resolver esse problema.

Por exemplo, um componente Button pode ser usado em vários locais em um aplicativo. Copiar e colar o objeto de estilo com cada instância do Button seria ineficiente. Em vez disso, crie um componente Button com estilo e reutilizável:

import React from 'react'; 
 import { Text, TouchableOpacity } from 'react-native'; 
 
 const Button = ({ onPress, children }) => { 
  const { buttonStyle, textStyle } = styles; 
  return ( 
    <TouchableOpacity onPress={onPress} style={buttonStyle}> 
      <Text style={textStyle}> 
        {children} 
      </Text> 
    </TouchableOpacity> 
  ); 
 }; 
 
 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 
  } 
 }; 

O componente Button com estilo pode ser facilmente importado e usado em todo o aplicativo sem declarar repetidamente o 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 ( 
        <View> 
          <TextInput placeholder='Username or Email' /> 
          <TextInput placeholder='Password' /> 
          <Button>Log In</Button> 
        </View> 
    ); 
  } 
 } 

Bibliotecas para Styling

Existem algumas bibliotecas populares para estilizar o React Native. Alguns deles fornecem recursos semelhantes ao Bootstrap , incluindo formulários padrão, estilos de botão e opções de layout de página. Uma das bibliotecas mais populares é o estilo de componentes . Existem muitos outros que você pode encontrar no npm e no GitHub para experimentar por si mesmo.