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

Question

I'm trying to render some bars for some stats, and i want the color of them depending of the value they have. I tried using if statements and switch but it doesn't seem to work

for the switch it will use the default value and the if will use the first checked value.

Sry for my english 😅

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

The logical part of your code looks ok. Problem may be related with styling.

Can you change your styles to these instead of yours:

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

Also if top solution wont work can you verify that is value is a number? By consoling it

console.log(typeof value)

Answer 2

Spelling mistake. you have to change (value) => 1 && value < 25) to (value) >= 1 && value < 25)

Answer 3

There is an issue in the if statements: else if ((value) => 1 && value < 25) { , if you pay attention closely this should be: else if (value >= 1 && value < 25) { .

Why? (value) => 1 is an arrow function that always returns 1.

This should do the work:

(value >= 1 && value < 25)

But it would be better if you transform this piece of code to a function so that like this:

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;
};

And use it like:

{width: value * 1.5, backgroundColor: getBackgroundColor()},