Style

Em React Native, você pode aplicar estilos aos seus componentes utilizando uma sintaxe semelhante ao CSS, mas com algumas diferenças. Aqui está como você pode aplicar estilos aos componentes em React Native:

1. Estilos Embutidos:

Você pode usar o atributo style diretamente em um componente para aplicar estilos embutidos. Os estilos são definidos como objetos JavaScript, onde as chaves são os nomes das propriedades de estilo em camelCase.

Exemplo:

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

const MeuComponente = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.texto}>Olá, mundo!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  texto: {
    fontSize: 20,
    color: 'blue',
  },
});

export default MeuComponente;

Neste exemplo, StyleSheet.create é usado para criar um objeto de estilo reutilizável. Isso é mais eficiente em termos de desempenho, especialmente se você tiver muitos estilos.

2. Estilos em Componentes de Estilo Externo:

Você também pode definir seus estilos em arquivos separados e importá-los nos componentes.

styles.js:

import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  texto: {
    fontSize: 20,
    color: 'blue',
  },
});

MeuComponente.js:

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

const MeuComponente = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.texto}>Olá, mundo!</Text>
    </View>
  );
};

export default MeuComponente;

Neste exemplo, os estilos são definidos em styles.js e importados no componente MeuComponente.js.

3. Estilos Condicionais:

Você pode aplicar estilos condicionalmente baseados em alguma lógica.

Exemplo:

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

const MeuComponente = ({ isSpecial }) => {
  return (
    <View style={[styles.container, isSpecial && styles.specialContainer]}>
      <Text style={styles.texto}>Olá, mundo!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  specialContainer: {
    backgroundColor: 'yellow',
  },
  texto: {
    fontSize: 20,
    color: 'blue',
  },
});

export default MeuComponente;

Neste exemplo, o estilo specialContainer é aplicado ao componente container com base na propriedade isSpecial. Se isSpecial for true, o fundo do componente será amarelo.

Esses são alguns dos conceitos básicos de estilização em React Native. Você pode criar layouts complexos combinando esses conceitos e explorar mais propriedades de estilo para personalizar ainda mais seus componentes. Se você tiver mais perguntas ou precisar de exemplos específicos, sinta-se à vontade para perguntar!