0
126
VistasCómo tener un color de texto diferente para 2 importaciones diferentes de un componente personalizado en React Native
Tengo un problema al cambiar el color del texto en algunas importaciones específicas de un componente personalizado.
Puedo cambiar el color del borde y el color de fondo del botón según su uso cuando lo importo cambiando el valor de los accesorios donde se usa. Sin embargo, no puedo averiguar cómo hacer lo mismo para el texto. Me imagino que es algo trivial, pero cualquier ayuda sería apreciada.
El siguiente código es el código para el botón.
import React from 'react'; import { StyleSheet, Text, TouchableOpacity } from 'react-native'; import colors from '../config/colors'; function AppButton({title, onPress, color = "primary", borderColor}) { return ( <TouchableOpacity style={[ styles.button, {backgroundColor: colors[color], borderColor: colors[borderColor] }]} onPress={onPress} > <Text style={[styles.text]}>{title}</Text> </TouchableOpacity> ); } const styles = StyleSheet.create({ button:{ backgroundColor: colors.primary, borderRadius:15, padding: 15, width: "100%", marginVertical: 10, justifiedContent: 'center', alignItems: 'center', borderWidth: 6, }, text:{ color: colors.white, fontSize: 18, textTransform: 'uppercase', fontWeight: 'bold', } }) export default AppButton;1 Respuestas
Responde la pregunta0
A juzgar por su comentario, parece haber un malentendido sobre cómo podría funcionar esto. He creado un pequeño refrigerio que muestra lo que necesitas.
Aquí está el código para completar. He creado dos botones. Uno usa el color de texto predeterminado, el otro usa un color diferente que hemos proporcionado a través de accesorios.
import React from 'react'; import {TouchableOpacity, Text, View, StyleSheet} from 'react-native' function AppButton({title, onPress, color = "blue", borderColor, textColor}) { return ( <TouchableOpacity style={[ styles.button, {backgroundColor: color, borderColor: borderColor }]} onPress={onPress} > <Text style={[styles.text, textColor && {color: textColor}]}>{title}</Text> </TouchableOpacity> ); } export default function App() { return ( <View style={{margin: 60}}> <AppButton textColor="red" title="TestButton" onPress={() => console.log("Hello World")} borderColor="yellow" /> <AppButton title="TestButton" onPress={() => console.log("Hello World")} borderColor="yellow" /> </View> ); } const styles = StyleSheet.create({ button:{ backgroundColor: "red", borderRadius:15, padding: 15, width: "100%", marginVertical: 10, justifiedContent: 'center', alignItems: 'center', borderWidth: 6, }, text:{ color: "white", fontSize: 18, textTransform: 'uppercase', fontWeight: 'bold', } })El primero tiene un color de texto rojo, el segundo es blanco.
Aquí está el resultado.
