Importo un color como props.color en mi componente funcional y lo configuro como el estado 'tagColor'. Cuando uso tagColor como un valor en mi hoja de estilo para establecer el color de fondo, recibo el error 'variable tagColor not found'
¿Cómo puedo usar variables dentro de mi hoja de estilo?
const Tag = (props) => { const [tagColor, setColor] = useState(props.color) return ( <View style={styles.container}> <TouchableOpacity style={styles.tag} title='tag'> </TouchableOpacity> </View> ); } const styles = StyleSheet.create({ container: { alignItems: "center", justifyContent: "center", height: 25, display: 'flex' }, tag: { backgroundColor: tagColor, } }); export default Tag;Bueno, por supuesto que no reconoce tagColor , está en un ámbito diferente. Observe que tagColor está en el alcance de su componente de función, mientras que StyleSheet es un alcance diferente.
Una forma de resolver esto es pasar directamente el color de backgroundColor a la propiedad de style , así:
<TouchableOpacity style={{backgroundColor: tagColor}} title="tag"> Otra forma es definir la clase de tag en su StyleSheet como una función que recibe el color y devuelve el estilo, como:
const styles = StyleSheet.create({ container: { ... }, tag: tagColor => ({ backgroundColor: tagColor, }) });Y luego utilízalo así:
<TouchableOpacity style={styles.tag(tagColor)} title="tag"> Iría con la primera forma si no tiene más estilos que no sean backgroundColor . Si necesita más estilos, vaya con el segundo método.