根据条件为平面列表的每个项目提供不同的颜色答案

【问题标题】：different color for every item of flatlist based on condition根据条件为平面列表的每个项目提供不同的颜色
【发布时间】：2020-12-05 09:39:11
【问题描述】：

我想根据条件为每个项目设置颜色，例如：-

我的情况如下：- let check = item.project_status。

和check 可以完成、进行中和未完成。

红色表示未完成，黄色表示进行中，绿色表示已完成。

这是我的平面列表代码：-

  <FlatList
        style={{height:constants.DesignHeight - 100}}
            data={props.DATA}
            renderItem={({ item }) =>
            
                <TouchableOpacity onPress={props.onPress} style={styles.flatlistContainer}>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                        <Text style={styles.text}>{item.project_name}  </Text>
                        <Text style={styles.text2}>Start: {moment(item.start_date).format("DD/MM/YYYY")}</Text>
                    </View>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between'  }}>
                        <Text style={styles.text}>Assigned to: {item.project_manager.name}  </Text>
                        <Text style={styles.text2}>End: {moment(item.end_date).format("DD/MM/YYYY")}</Text>
                    </View>
                    <View>

                    </View>
                </TouchableOpacity>
            }
            KeyExtractor={(item) => item.id}
           // ItemSeparatorComponent={() => renderSeparator()}
        />

const styles = StyleSheet.create({
flatlistContainer: {
    width: '100%',
},
text: {
    fontSize: constants.vw(20),
    lineHeight: constants.vw(30),
},

text2: {
    fontSize: constants.vw(16),
    lineHeight: constants.vw(30),
}

})

我怎样才能做到这一点？

谢谢！！！

【问题讨论】：

'...红色表示未完成，黄色表示进行中，绿色表示已完成'这些状态究竟存储在哪里？
在 item.project_status 中
您需要对上面 JSX 的哪个部分进行样式设置？我之所以问，是因为我很难在您的屏幕截图和您的代码似乎呈现的内容之间建立联系。
对不起，我复制了错误的代码，现在检查
你到底用什么来做造型？ styles.text 指的是什么？

标签： javascript reactjs react-native react-native-android react-native-ios

【解决方案1】：

我认为您可以为每个项目状态制作一个样式你可以使用它

const styles = StyleSheet.create({
...
incomplete: {
  color: 'red'
},
inprogress: {
  color: 'yellow'
},
completed: {
  color: 'green'
}
}})

你可以在样式标签上使用它像这样

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
      <Text style={[styles.text, styles[item.project_status]}>{item.project_name}  </Text>
      <Text style={[styles.text2, styles[item.project_status]}>Start: {moment(item.start_date).format("DD/MM/YYYY")}</Text>
</View>

【讨论】：