可以根据值更改文本颜色吗？ （React native）

Question

我正在使用React本机的应用程序中工作，这里是我遇到麻烦的代码：

    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;

我需要的是，如果articleData.percent_change_1h变量为正，则该变量的颜色必须为绿色，否则必须为红色。

PricingCard是react-native-elements库的对象：https://react-native-training.github.io/react-native-elements/API/pricing/

提前致谢

Answer 1

您可以使用ternary operator来操纵传递给styles PricingCard's wrapperStyle的{​​{1}}。

prop