反应原生表细胞自定义背景颜色

Question

我想用表格格式表示我的json数据 细胞的自定义背景颜色。

JSON文件的每个单元格值都有一个额外的0-10数字。较大的数字应该更暗。

可以将颜色十六进制代码添加到远程服务器上的JSON文件中，以减少本机反应的工作量。

请参阅附图，例如。

Answer 1

解决方案1：如果您没有随JSON一起保存颜色

尝试使用此代码剪切，假设您正在使用某种类型的地图功能来显示单元格。我不确定这是多么可扩展或重，因为它为每个单元调用一个函数来确定它的颜色。

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>
    )
})

解决方案2：如果您有颜色代码以及每个单元格的值

return yourvalues.map((eachItem) => {
    return (
        <View style={{ backgroundColor: eachItem.colorValue }}>
            <Text>Sample</Text>
        </View>
    )
})

Answer 2

结束了这一点，暂时工作正常......

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>