如何根據本機反應中的值更改背景顏色

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