Em Botão.js
import React from "react";
import { StyleSheet, TouchableOpacity } from "react-native";
import Texto from './Texto';
export default function Botão({ children, style }) {
function onPress() {
console.log("Clicked");
}
return (
<>
<TouchableOpacity style={[style, styles.button]} onPress={() => { onPress }}>
<Texto style={styles.textButton}>{children}</Texto>
</TouchableOpacity>
</>
)
}
const styles = StyleSheet.create({
button: {
backgroundColor: "#2a9f85",
paddingVertical: 16,
borderRadius: 8,
},
textButton: {
textAlign: "center",
color: "#fff",
fontWeight: "bold",
fontSize: 16
}
})
Em Detalhes.js
import React from "react";
import { View, StyleSheet, Image } from "react-native";
import Texto from '../../../componentes/Texto'; // Importe do componente Texto onde ira colocar as fontes
import Botão from '../../../componentes/Botão';
export default function Detalhes({ nome, logoFazenda, nomeFazenda, descricao, preco, botao }) {
return (
<>
<Texto style={styles.nome}>{nome}</Texto>
<View style={styles.fazenda}>
<Image source={logoFazenda} style={styles.imagemFazenda} />
<Texto style={styles.nomeFazenda}>{nomeFazenda}</Texto>
</View>
<Texto style={styles.descricao}>{descricao}</Texto>
<Texto style={styles.preco}>{preco}</Texto>
<Botão style={styles.button}>{botao}</Botão>
</>
)
}
const styles = StyleSheet.create({
nome: {
color: "#464646",
fontSize: 26,
fontWeight: "bold"
},
fazenda: {
flexDirection: "row",
paddingVertical: 12
},
imagemFazenda: {
width: 32,
height: 32
},
nomeFazenda: {
fontSize: 18,
marginLeft: 12,
},
descricao: {
color: "#a3a3a3",
fontSize: 18
},
preco: {
color: "#2a9f85",
fontWeight: "bold",
fontSize: 26,
marginTop: 8
},
button: {
marginTop: 16,
},
})