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

Question

我想要每件商品的颜色基于以下条件：-

我的条件如下：- 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),
}

})

我怎样才能做到这一点？

谢谢！！！

Answer 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>

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

different color for every item of flatlist based on condition

javascript

reactjs

react-native

react-native-android

react-native-ios