reaccionar colores de fondo personalizados de celdas de tabla nativas

reaccionar colores de fondo personalizados de celdas de tabla nativas

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.

tabla

Mostrar la mejor respuesta

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>