Question

我正在尝试渲染一些统计数据的条形，并且我希望它们的颜色取决于它们的值。我尝试使用.git/hooks语句和if，但似乎不起作用

对于switch，它将使用switch值，而default将使用第一个选中的值。

为我的英语感到S

if

Answer 1

代码的逻辑部分看起来正常。问题可能与样式有关。

您可以将样式更改为以下样式吗？

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

如果最佳解决方案不起作用，您还能验证 value 是数字吗？通过安慰

console.log（值类型）

Answer 2

拼写错误。您必须将(value) => 1 && value < 25)更改为(value) >= 1 && value < 25)

Answer 3

if语句中有一个问题：else if ((value) => 1 && value < 25) {，如果您密切注意，应该是：else if (value >= 1 && value < 25) {。

为什么？ (value) => 1是一个箭头函数，始终返回1。

这应该可以完成工作：

(value >= 1 && value < 25)

但是最好将这段代码转换为一个函数，如下所示：

const getBackgroundColor = () => {
    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 color;
};

并像这样使用它：

{width: value * 1.5, backgroundColor: getBackgroundColor()},

如何根据React Native中的值更改BackgroundColor

3 个答案: