如何显示不同的颜色/文本客栈flatlist的具体细节在react native?

Question

如果性别是男性，我想显示不同的文本颜色&第二种情况如果性别是女性那么它会将文本"女性"改为"哦">

下面是我的代码:

const API_ENDPOINT = `https://randomuser.me/api/?seed=1&page=1&results=20`;
const [fullData, setFullData] = useState([]);
const [products, setProducts] = useState([]);
useEffect(() => {
fetch(API_ENDPOINT)
.then((response) => response.json())
.then((response) => {
setProducts(response.results);
setFullData(response.results);
});
}, []);
<FlatList
data={products}
keyExtractor={(item) => item.email}
renderItem={({ item }) => (
<View style={styles.listItem}>
<View style={styles.metaInfo}>
<Text style={styles.title}>{item.name.first}</Text>
<Text style={styles.title}>{item.gender}</Text>
<Text style={{ color: 'blue' }}>{item.gender}</Text>
</View>
</View>
)}
/>

Answer 1

您需要在style属性和Text JSX:

中传递条件语句。

<Text style={item.gender === "male" ?  { color: 'blue' } : {color: "red"}}>{item.gender === "male" ? item.gender : "oops"}</Text>