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

Question

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

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

为我的英语Sry 😅

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;

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