javascript - It is possible to change the text color depending on the value? (React native) - Stack Overflow

admin管理员组

文章数量:1336304

I am working in an app using React native, here goes the code that I am in trouble:

import React, { Component } from "react";
import { Text, StyleSheet } from "react-native";
import { Content, Card, CardItem, Body, Left } from "native-base";
import { PricingCard } from "react-native-elements";

export default class AppBodyData extends Component {
  render() {
    let articles = this.props.data.map(function (articleData, index) {
      return (
        <PricingCard
          //color='#ff3300'
          wrapperStyle={
            articleData.percent_change_1h >= 0 ? styles.green : styles.red
          }
          info={[
            "1h change: " + articleData.percent_change_1h,
            "24h change: " + articleData.percent_change_24h,
            "7days change: " + articleData.percent_change_7d,
          ]}
          button={{
            title: "More information",
            icon: "info",
            backgroundColor: "#4f9deb",
          }}
        />
      );
    });

    return <Content>{articles}</Content>;
  }
}

const styles = StyleSheet.create({
  green: {
    color: "#00ff00",
  },
  red: {
    color: "#ff0000",
  },
});

module.export = AppBodyData;

What I need is that if the articleData.percent_change_1h variable is positive the color of that variable must be green otherwise must be red.

PricingCard is an object of react-native-elements library: /

Thanks in advance

I am working in an app using React native, here goes the code that I am in trouble:

import React, { Component } from "react";
import { Text, StyleSheet } from "react-native";
import { Content, Card, CardItem, Body, Left } from "native-base";
import { PricingCard } from "react-native-elements";

export default class AppBodyData extends Component {
  render() {
    let articles = this.props.data.map(function (articleData, index) {
      return (
        <PricingCard
          //color='#ff3300'
          wrapperStyle={
            articleData.percent_change_1h >= 0 ? styles.green : styles.red
          }
          info={[
            "1h change: " + articleData.percent_change_1h,
            "24h change: " + articleData.percent_change_24h,
            "7days change: " + articleData.percent_change_7d,
          ]}
          button={{
            title: "More information",
            icon: "info",
            backgroundColor: "#4f9deb",
          }}
        />
      );
    });

    return <Content>{articles}</Content>;
  }
}

const styles = StyleSheet.create({
  green: {
    color: "#00ff00",
  },
  red: {
    color: "#ff0000",
  },
});

module.export = AppBodyData;

What I need is that if the articleData.percent_change_1h variable is positive the color of that variable must be green otherwise must be red.

PricingCard is an object of react-native-elements library: https://react-native-training.github.io/react-native-elements/API/pricing/

Thanks in advance

• javascript
• reactjs
• native

Share Improve this question Follow edited Jul 23, 2020 at 0:54 thiagobraga 1,56122 gold badges1616 silver badges3232 bronze badges asked Dec 20, 2017 at 10:50 Roger CollRoger Coll 12511 gold badge33 silver badges1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You could use a ternary operator to manipulate styles passed to your PricingCard's wrapperStyle prop.

// Stylesheet.
import { StyleSheet } from 'react-native'

// Card.
<PricingCard wrapperStyle={(articleData.percent_change_1h >= 0) ? styles.green : styles.red} ../>

// Styles.
const styles = Stylesheet.create({
  green: {
    color: '#00ff00'
  },
  red: {
    color: '#ff0000'
  }
})

本文标签： javascriptIt is possible to change the text color depending on the value (React native)Stack Overflow