Me gustaría presentar mis datos json en formato de tabla con colores de fondo personalizados para las celdas.
El archivo JSON tiene un número adicional del 0 al 10 para cada valor de celda. el número más grande debe ser más oscuro.
Podría tener los códigos hexadecimales de color agregados a mi archivo JSON en el servidor remoto para menos trabajo en el lado nativo de reacción.
Por favor, vea la imagen adjunta como ejemplo.
Solución 1: si no tiene el color guardado junto con JSON
Pruebe este código cortado, asumiendo que está usando algún tipo de función de mapa para mostrar las celdas. No estoy seguro de cuán escalable o pesado es esto, ya que llama a una función para que cada celda determine sus colores.
checkColors(value) {
if(value > 5) {
return { backgroundColor:'red' }
} else if (value > 4) {
return { backgroundColor:'green' }
} else if (value > 3) {
return { backgroundColor:'white' }
}
}
return yourvalues.map((eachItem) => {
return (
<View style={ this.checkColors(eachItem.value) }>
<Text>Sample</Text>
</View>
)
})
Solución 2: si tiene un código de color junto con los valores de cada celda
return yourvalues.map((eachItem) => {
return (
<View style={{ backgroundColor: eachItem.colorValue }}>
<Text>Sample</Text>
</View>
)
})
Terminé con esto, funciona bien por el momento...
import { Col, Row, Grid } from "react-native-easy-grid";
<View>
<Grid>
<Row>
<Col size={50}>
<Text style={{backgroundColor: item.ip_count_bgcolor}}>
{item.ip_address}
</Text>
</Col>
<Col size={50}>
<Text style={{backgroundColor: item.software_count_bgcolor}}>
{item.software}
</Text>
</Col>
</Row>
</Grid>
</View>