如何根据 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 = () => {&nbsp; &nbsp; let color;&nbsp; &nbsp; if (value === 0) {&nbsp; &nbsp; &nbsp; &nbsp; color = '';&nbsp; &nbsp; } else if (value >= 1 && value < 25) {&nbsp; &nbsp; &nbsp; &nbsp; color = 'red';&nbsp; &nbsp; } else if (value >= 25 && value < 50) {&nbsp; &nbsp; &nbsp; &nbsp; color = 'orange';&nbsp; &nbsp; } else if (value >= 50 && value < 90) {&nbsp; &nbsp; &nbsp; &nbsp; color = 'yellow';&nbsp; &nbsp; } else if (value >= 90) {&nbsp; &nbsp; &nbsp; &nbsp; color = 'green';&nbsp; &nbsp; }&nbsp; &nbsp; return color;};并像这样使用它：{width: value * 1.5, backgroundColor: getBackgroundColor()},

Answer 2

您的代码的逻辑部分看起来没问题。问题可能与样式有关。你能把你的风格改成这些而不是你的吗：const styles = StyleSheet.create({&nbsp; container: {&nbsp; &nbsp; flex: 1,&nbsp; &nbsp; flexDirection: "row",&nbsp; &nbsp; alignItems: "center",&nbsp; &nbsp; justifyContent: "center",&nbsp; },&nbsp; bar: {&nbsp; &nbsp; height: 20,&nbsp; &nbsp; width: 20&nbsp; },});另外，如果最佳解决方案不起作用，您可以验证值是一个数字吗？通过安慰它console.log（值类型）

Answer 3

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