根据条件，每个入选清单的颜色都不同

问题描述

我希望根据以下条件确定每个项目的颜色：-

我的状况会像：:-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),}

}）

我该如何实现？

谢谢！

解决方法

我认为您可以为每个项目状态设定样式 然后就可以使用

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>