反应本机 table 细胞自定义背景颜色

Question

我想以 table 格式显示我的 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>

反应本机 table 细胞自定义背景颜色

react native table cells custom background colors

react-native

react-native-flatlist