可以根据值更改文本颜色吗? (反应本机)
It is possible to change the text color depending on the value? (React native)
我在一个使用 React native 的应用程序中工作,这里是我遇到麻烦的代码:
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/
提前致谢
您可以使用 ternary operator
来操纵传递给您的 PricingCard's
wrapperStyle
prop
.
的 styles
// 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'
}
})
我在一个使用 React native 的应用程序中工作,这里是我遇到麻烦的代码:
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/
提前致谢
您可以使用 ternary operator
来操纵传递给您的 PricingCard's
wrapperStyle
prop
.
styles
// 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'
}
})