Entrar Ainda não tem acesso?
1
resposta

Componente de botão

Referente ao curso React Native: criando um app, no capítulo Botão e lista e atividade Reaproveitando o botão

por Guilherme Filipe Da Rosa
| 72.9k xp | 3 posts
Desenvolvedor Full Stack 
import { StyleSheet, TouchableOpacity } from 'react-native';
import Texto from './Texto';

export default function Botao({ children }) {
    return <TouchableOpacity style={estilos.botao} onPress={() => {}}>
    <Texto style={estilos.textoBotao}>{ children }</Texto></TouchableOpacity>
}

const estilos = StyleSheet.create({
    botao: {
        backgroundColor: '#2A9F85',
        paddingVertical: 16,
        borderRadius: 6,
    },
    textoBotao: {
        textAlign: 'center',
        color: '#fff',
        fontSize: 16,
        lineHeight: 26,
        fontWeight: 'bold',
    },
})
1 resposta
por Matheus Brandino
| 4803.7k xp | 10196 posts
Alura Scuba Team Mobile Software Engineer

Olá, Guilherme!

Pelo código que você compartilhou, parece que você está criando um componente de botão em React Native. O componente recebe um parâmetro chamado "children" que representa o conteúdo dentro do botão.

No retorno da função, você está usando o componente TouchableOpacity do React Native para criar o botão. Ele possui um estilo definido em estilos.botao, que define a cor de fundo, o espaçamento vertical, e o raio das bordas.

Dentro do TouchableOpacity, você está usando o componente Texto (que parece ser um componente customizado) para exibir o conteúdo do botão. Ele recebe o estilo definido em estilos.textoBotao, que define a cor do texto, o tamanho da fonte, o alinhamento e o peso da fonte.

No momento, a função onPress do TouchableOpacity está vazia, o que significa que nada acontecerá quando o botão for pressionado. Você pode adicionar uma função de callback nesse evento para realizar alguma ação quando o botão for pressionado.

Espero ter ajudado e bons estudos!