React Native中如何使用三元运算符实现基于宝可梦类型的动态样式

问题原因 #

你当前的写法存在逻辑错误：在React Native的style数组中，后面的样式优先级高于前面的样式。当pokemonType为grass时，只有第一个三元返回styles.grass，剩下7个三元全部返回styles.pokemonTypeDefault，最终默认样式会覆盖掉你期望的类型样式，所以始终显示默认的蓝色背景。

修复方案 #

你不需要写多个三元判断，直接用对象映射的方式取对应类型的样式即可，没有匹配到的类型再取默认样式：

{/* Pokemon Type */}
<View style={[
  styles.pokemonTypeDefault,
  styles[pokemonType] // 直接用变量取对应类型的样式，会自动覆盖默认样式里的backgroundColor
]}>
  <Text style={styles.pokemonTypeText}>{pokemonType.toUpperCase()}</Text>
</View>

如果担心返回的pokemonType不存在你定义的样式里，也可以写成更稳妥的单三元写法：

<View style={
  styles[pokemonType] ? styles[pokemonType] : styles.pokemonTypeDefault
}>
  <Text style={styles.pokemonTypeText}>{pokemonType.toUpperCase()}</Text>
</View>

样式优化建议 #

你现在每个类型样式里都写了重复的宽、边距、圆角等属性，其实把公共属性都放在pokemonTypeDefault里即可，类型样式只需要保留backgroundColor就能实现效果，大幅减少冗余代码：

const styles = StyleSheet.create({
  pokemonTypeDefault: {
    width: 250,
    height: 30,
    marginTop: 10,
    marginLeft: 80,
    borderRadius: 50,
    backgroundColor: 'blue',
  },
  grass: {
    backgroundColor: '#00FF00',
  },
  fire: {
    backgroundColor: '#FFA500',
  },
  // 其余类型样式仅保留backgroundColor属性即可
})

内容的提问来源于stack exchange，提问作者mmiah