0
181
VistasTiene 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 Respuestas
Responde la pregunta0
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
Denunciar
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
Denunciar
Responde la pregunta