Estoy tratando de cambiar el color de un componente según el tipo de Pokémon que se muestra. Tengo esta vista dentro de un componente principal que recupera pokemon de una API. La variable pokemonType es de la API. Se registra y puedo console.log('pokemonType') que registra el tipo de pokemon, por ejemplo, 'hierba'. Parece que el operador ternario no está registrando el pokemonType y va directamente al valor predeterminado. ¿Estoy escribiendo esto mal?
{/* Pokemon Type */} <View style={[ (pokemonType === 'grass') ? styles.grass : styles.pokemonTypeDefault, (pokemonType === 'fire') ? styles.fire : styles.pokemonTypeDefault, (pokemonType === 'water') ? styles.water : styles.pokemonTypeDefault, (pokemonType === 'bug') ? styles.bug : styles.pokemonTypeDefault, (pokemonType === 'ghost') ? styles.ghost : styles.pokemonTypeDefault, (pokemonType === 'rock') ? styles.rock : styles.pokemonTypeDefault, (pokemonType === 'steel') ? styles.steel : styles.pokemonTypeDefault, (pokemonType === 'electric') ? styles.electric : styles.pokemonTypeDefault, ]}> <Text style={styles.pokemonTypeText}>{pokemonType.toUpperCase()}</Text> </View> const styles = StyleSheet.create({ grass: { backgroundColor: '#00FF00', width: 250, height: 30, marginTop: 10, marginLeft: 80, borderRadius: 50, }, fire: { backgroundColor: '#FFA500', width: 250, height: 30, marginTop: 10, marginLeft: 80, borderRadius: 50, }, }) ..//All the other type styles pokemonTypeDefault: { width: 250, height: 30, marginTop: 10, marginLeft: 80, borderRadius: 50, backgroundColor: 'blue', },Muchas gracias
El problema es que está agregando styles.pokemonTypeDefault varias veces y, por lo tanto, sobrescribe sus estilos.
La forma en que funcionan los estilos nativos de reacción es que cuando pasa una matriz de estilos, los estilos en el lado derecho sobrescriben las propiedades establecidas en los elementos anteriores, en su ejemplo, si el tipo de pokemon es hierba, su matriz de estilos se vería algo así como
[styles.grass, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault, styles.pokemonTypeDefault]Una solución más simple y clara sería crear una función para obtener sus estilos.
P.ej
{/* Pokemon Type */} <View style={getPokemonTypeStyle(pokemonType)}> <Text style={styles.pokemonTypeText}>{pokemonType.toUpperCase()}</Text> </View> const getPokemonTypeStyle = (pokemonType) => { switch (pokemonType) { case 'grass': return styles.grass case 'fire': return styles.fire case 'water': return styles.water case 'bug': return styles.bug case 'ghost': return styles.ghost case 'rock': return styles.rock case 'steel': return styles.steel case 'electric': return styles.electric default: return styles.pokemonTypeDefault } const styles = StyleSheet.create({ grass: { backgroundColor: '#00FF00', width: 250, height: 30, marginTop: 10, marginLeft: 80, borderRadius: 50, }, fire: { backgroundColor: '#FFA500', width: 250, height: 30, marginTop: 10, marginLeft: 80, borderRadius: 50, }, }) ..//All the other type styles pokemonTypeDefault: { width: 250, height: 30, marginTop: 10, marginLeft: 80, borderRadius: 50, backgroundColor: 'blue', },