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

Question

我正在尝试为某些统计数据渲染一些条形图，我希望它们的颜色取决于它们所具有的值。我尝试使用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;

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

Answer 2

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

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

const styles = StyleSheet.create({

  container: {

    flex: 1,

    flexDirection: "row",

    alignItems: "center",

    justifyContent: "center",

  },

  bar: {

    height: 20,

    width: 20

  },

});

另外，如果最佳解决方案不起作用，您可以验证值是一个数字吗？通过安慰它

console.log（值类型）

Answer 3

拼写错误。你必须 (value) => 1 && value < 25)改成(value) >= 1 && value < 25)