React Native中如何根据数值动态修改组件背景色

我明白你遇到的困扰啦——不管用if还是switch，颜色判断都没按预期工作对吧？咱们挨个排查问题，把逻辑捋顺：

一、if语句的核心错误 #

你看这段代码：

else if ((value) => 1 && value < 25) {
  color = "red";
}

这里你不小心把条件写成了箭头函数(value) => 1，这个表达式永远为true（因为箭头函数本身是一个有效的函数对象），所以不管value实际是多少，都会匹配这个分支，后面的判断根本没机会执行！

正确的写法应该是直接用比较运算符：value >= 1 && value < 25

二、switch语句的用法误区 #

你的switch写法不符合语法规则，switch是用来匹配具体值的，不能直接写条件判断。如果想用switch实现范围判断，需要把switch的表达式设为true，然后每个case写对应的条件逻辑：

switch (true) {
  case value === 0:
    color = "";
    break;
  case value >= 1 && value < 25:
    color = "red";
    break;
  case value >= 25 && value < 50:
    color = "orange";
    break;
  case value >= 50 && value < 90:
    color = "yellow";
    break;
  case value >= 90:
    color = "green";
    break;
  default:
    color = "";
}

三、修正后的完整代码 #

这里给你把if语句修复后的版本，逻辑就能正常运行了：

import React from "react";
import { View, Text, StyleSheet } from "react-native";

const Stats = ({ statName, value }) => {
  let color;
  if (value === 0) { // 建议用===严格相等，避免类型转换导致的意外问题
    color = "";
  } else if (value >= 1 && value < 25) { // 修正箭头函数的错误
    color = "red";
  } else if (value >= 25 && value < 50) {
    color = "orange";
  } else if (value >= 50 && value < 90) {
    color = "yellow";
  } else if (value >= 90) {
    color = "green";
  }

  return (
    <View style={styles.container}>
      <Text>{statName}</Text>
      <Text>{value}</Text>
      <View style={[styles.bar, { width: value * 1.5, backgroundColor: color }]} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  bar: {
    height: 20,
  },
});

export default Stats;

另外提个小细节：判断相等时尽量用===严格相等运算符，避免因为类型转换出现奇怪的问题，比如0 == ""会返回true，但0 === ""不会，这样逻辑会更严谨哦。

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