亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

臨摹微笑 2023-05-25 18:08:40
我正在嘗試為某些統計數據渲染一些條形圖,我希望它們的顏色取決于它們所具有的值。我嘗試使用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;
查看完整描述

3 回答

?
catspeake

TA貢獻1111條經驗 獲得超0個贊

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


查看完整回答
反對 回復 2023-05-25
?
手掌心

TA貢獻1942條經驗 獲得超3個贊

您的代碼的邏輯部分看起來沒問題。問題可能與樣式有關。


你能把你的風格改成這些而不是你的嗎:


const styles = StyleSheet.create({

  container: {

    flex: 1,

    flexDirection: "row",

    alignItems: "center",

    justifyContent: "center",

  },

  bar: {

    height: 20,

    width: 20

  },

});

另外,如果最佳解決方案不起作用,您可以驗證值是一個數字嗎?通過安慰它


console.log(值類型)


查看完整回答
反對 回復 2023-05-25
?
慕村225694

TA貢獻1880條經驗 獲得超4個贊

拼寫錯誤。你必須 (value) => 1 && value < 25)改成(value) >= 1 && value < 25)



查看完整回答
反對 回復 2023-05-25
  • 3 回答
  • 0 關注
  • 185 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號