0
179
ViewsTiene problemas para cambiar el color del estado del contenedor al pasar accesorios de datos ficticios
Tengo un problema sobre cómo cambiar el color del contenedor de estado al pasar accesorios de datos ficticios . Puedo cambiar el color de fuente del estado pero no el color del contenedor igual que el color de fuente . Por favor, ayúdame. A continuación he adjuntado la imagen de la interfaz de usuario y el código. Usé este método para cambiar el color de la fuente del estado:
<Text style={[GlobalStyle.ReceiptAccept, migrateData.status === "Declined" && GlobalStyle.ReceiptDeclined, migrateData.status === "Pending" && GlobalStyle.ReceiptPending]}>{migrateData.status}</Text>Imagen de interfaz de usuario:
ReciboPendiente.js
import React, {useState} from 'react'; import {View, Text, TouchableOpacity, Image, FlatList,ScrollView} from 'react-native'; import GlobalStyle from '../components/GlobalStyle'; import { HeaderBar2 } from '../components/HeaderBar'; import {GrayCustomView} from './../components/styles'; const ReceiptDetailsScreen = ({route, navigation}) => { const {migrateData} = route.params; return ( <ScrollView style={[GlobalStyle.GrayScrollView]}> <HeaderBar2/> <View style={[GlobalStyle.AlignReceiptDetailContainer]}> <View style={[GlobalStyle.ReceiptDetailContainer]}> <View style={[GlobalStyle.AlignReceiptHeaderContainer]}> <View style={[GlobalStyle.ReceiptHeader1]}> <Text style={[GlobalStyle.ReceiptListTitle]}>{migrateData.receiptnum}</Text> </View> <View style={[GlobalStyle.ReceiptPendingContainer]}> <Text style={[GlobalStyle.ReceiptAccept, migrateData.status === "Declined" && GlobalStyle.ReceiptDeclined, migrateData.status === "Pending" && GlobalStyle.ReceiptPending]}>{migrateData.status}</Text> </View> </View> </ScrollView> ) }ficticio.js:
·
Santiago Gelvez
2 answers
Answer question0
Agregue {"backgroundColor":"black"} en la vista y cambie el color como desee
<View style={[GlobalStyle.ReceiptPendingContainer,{"backgroundColor":status === "Pending" ? "yellow": status === "Declined" ? "red" : "green" }]}> <Text style={[GlobalStyle.ReceiptAccept, migrateData.status === "Declined" && GlobalStyle.ReceiptDeclined, migrateData.status === "Pending" && GlobalStyle.ReceiptPending]}>{migrateData.status}</Text> </View>
·
Santiago Gelvez
Report
0
Puedes probar esto:
const getTextStyle = (status) => { switch(status){ case "Declined": return GlobalStyle.ReceiptDeclined case "Pending": return GlobalStyle.ReceiptPending default: return {} } } return ( ... <Text style={[GlobalStyle.ReceiptAccept, getTextStyle()]}>{migrateData.status}</Text> ... )
·
Santiago Gelvez
Report
Answer question