如何根据本机反应中的值更改背景颜色答案

【问题标题】：How to change BackgroundColor depending of a value in react native如何根据本机反应中的值更改背景颜色
【发布时间】：2020-10-19 10:18:35
【问题描述】：

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

对于switch，它将使用default 值，而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";
  }

  //   switch (value) {
  //     case value >= 1:
  //       color = "red";
  //       break;
  //     case value >= 25:
  //       color = "orange";
  //       break;
  //     case value >= 50:
  //       color = "yellow";
  //       break;
  //     default:
  //       color = "";
  //   }

  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;

【问题讨论】：

“Stats”组件中“statName”和“value”的取值是多少？
将第一个 elseif 条件从 else if ((value) => 1 && value = 1 && value

标签： javascript reactjs react-native if-statement switch-statement

【解决方案1】：

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()},

【讨论】：

【解决方案2】：

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

你能把你的风格改成这些而不是你的吗：

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

此外，如果顶级解决方案不起作用，您能否验证 value 是一个数字吗？通过安慰它

console.log(类型值)

【讨论】：

【解决方案3】：

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

【讨论】：