Entrar Ainda não tem acesso?
1
resposta

Componente Botão

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

por Flávia Moreira dos Santos
| 35.9k xp | 8 posts
import React from "react";
import {StyleSheet, TouchableOpacity } from "react-native";
import Texto from "../components/Texto";

export default function Button({children,style})
{
    function OnPress() 
    {
        console.log("Clicked");
    }

    return  <TouchableOpacity style={[estilo.botao,style]} onPress={()=>{OnPress()}}><Texto style={estilo.texto}>{children}</Texto></TouchableOpacity>
}

const estilo = StyleSheet.create(
{
    botao:{marginTop:6,backgroundColor:"#2A9F85",paddingVertical:16,borderRadius:6,},
    texto:{textAlign:"center",color:"white",fontSize:16, lineHeight:26,fontWeight:"bold"}
})
import React from "react";
import {Image,StyleSheet,View } from "react-native";
import Button from "../../../components/Button";
import Texto from "../../../components/Texto";
export default function DetalhesView({nomeCurso,logoCurso,nome,descricao,preco,button})
{
    return <>
     <Texto style={estilos.nomeCurso}>{nomeCurso}</Texto>
        <View style={estilos.content}>
            <Image source={logoCurso} style={estilos.imagem}></Image> 
            <Texto style={estilos.nome}>{nome}</Texto>
        </View>
        <Texto style={estilos.descricao}>{descricao}</Texto>
        <Texto style={estilos.preco}>{preco}</Texto>
        <Button style={estilos.botao}>{button}</Button>
    </>
}

const estilos = StyleSheet.create({
    nomeCurso:{color:"#464646",fontSize:26,lineHeight:26,fontWeight:"bold"},
    content:{flexDirection:"row",paddingVertical:12},
    imagem:{width:32,height:32},
    nome:{color:"#464646",fontSize:16,lineHeight:26,marginLeft:12},
    descricao:{color:"#A3A3A3",fontSize:16,lineHeight:26},
    preco:{color:"#2A9F85",fontSize:20,lineHeight:42,marginTop:8,fontWeight:"bold"},
     botao: { marginTop: 16,}
})
})
1 resposta
por Matheus Brandino
| 4803.7k xp | 10196 posts
Alura Scuba Team Mobile Software Engineer

Olá, Flávia!

Pelo que entendi, você está com uma dúvida relacionada ao componente Button que está sendo utilizado na sua função DetalhesView. Você gostaria de saber como personalizar o estilo desse botão, correto?

No código que você compartilhou, o estilo do botão está sendo passado como uma propriedade chamada "style" para o componente Button. Essa propriedade é recebida como parâmetro na função Button e é adicionada como um estilo adicional ao TouchableOpacity.

Para personalizar o estilo do botão, você pode fazer o seguinte:

  1. No arquivo onde você está utilizando o componente DetalhesView, você pode passar um objeto de estilo para a propriedade "style" do componente Button. Por exemplo:
<Button style={{ backgroundColor: "red", borderRadius: 10 }}>Clique aqui</Button>

Nesse exemplo, o botão terá um fundo vermelho e bordas arredondadas.

  1. No arquivo do componente Button, você pode adicionar os estilos diretamente no objeto "estilo.botao" que está sendo utilizado no TouchableOpacity. Por exemplo:
const estilo = StyleSheet.create({
    botao: {
        marginTop: 6,
        backgroundColor: "#2A9F85",
        paddingVertical: 16,
        borderRadius: 6,
        // Adicione os estilos personalizados aqui
        // Por exemplo:
        borderWidth: 2,
        borderColor: "blue",
    },
    // ...
})

Nesse exemplo, o botão terá uma borda azul com espessura de 2 pixels.

Lembre-se de que você pode adicionar quantos estilos personalizados quiser, de acordo com a sua necessidade.

Espero ter ajudado e bons estudos!