反应原生表格单元格自定义背景颜色答案

【问题标题】：react native table cells custom background colors反应原生表格单元格自定义背景颜色
【发布时间】：2018-02-01 09:05:54
【问题描述】：

我想以表格形式呈现我的 json 数据单元格的自定义背景颜色。

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

可以将颜色十六进制代码添加到远程服务器上的 JSON 文件中，以减少 react native 方面的工作。

例如，请看附图。

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案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>
    )
})

【讨论】：

【解决方案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>

【讨论】：