値に応じてテキストの色を変更することはできますか？私はネイティブリアクト使用してアプリで働いています

Question

（ネイティブリアクト）、ここで私が困っていますコードを行く：

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が反応し、ネイティブの要素をライブラリーの目的である：https://react-native-training.github.io/react-native-elements/API/pricing/

高度なおかげ

Answer 1

あなたのPricingCard'swrapperStylepropに渡さstylesを操作するためternary operatorを使用することができます。

// 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' 
    } 
})