如何在flatlist反应中更改每个列表项目的不同颜色

Question

在这里，我在flatlist上填充JSON值及其工作正常，但是现在我必须更改每个列表的颜色，例如在JSON值中，当它的值时有" crilevel"为1，应该是正常的，如果3则为黄色，然后是红色。所以请帮助我，如果其他内部返回不起作用，我该怎么做。请帮助

    import React, { Component } from 'react';
    import { View, Text, TextInput,   
    FooterTab,Button,TouchableOpacity, ScrollView, StyleSheet,
     ActivityIndicator ,Header,FlatList} from 'react-native';
     import {Icon} from 'native-base';
    import { createStackNavigator } from 'react-navigation';  
    import { SearchBar } from 'react-native-elements';
    export default class Issueviewlist  extends Component {
  static navigationOptions = {
    title: 'Selected Item',
    header: null,
  };
  constructor() {
    super();
    this.state = {
      data: null,
      loading: true,
      search: '',
    };
  }
  componentDidMount() {
    this.createViewGroup();
  }
  createViewGroup = async () => {
    try {
      const response = await fetch(
        'http:///Dsenze/userapi/issue/viewissue',
        {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
           "password": 'admin',
            "username": 'admin',
            "startlimit":"0",
            "valuelimit":"10",
          }),
        }
      );
      const responseJson = await response.json();
      const { issueData } = responseJson;
      this.setState({
        data: issueData,
        loading: false,
      });
    } catch (e) {
      console.error(e);
    }
  };

  updateSearch = search => {
    this.setState({ search });
  };
  keyExtractor = ({ id }) => id.toString();
  keyExtractor = ({ desc }) => desc.toString();
  renderItem = ({ item }) => (
    <TouchableOpacity
      style={styles.item}
      activeOpacity={0.4}
      onPress={() => {
        this.clickedItemText(item);
      }}>
      <Text style={styles.buttonText}>Id {item.id}</Text>
      <Text>Hospital Name {item.desc}</Text>
      <Text>User {item.initiatedBy}</Text>
      <Text>Date {item.dateTime}</Text>
    </TouchableOpacity>
  );
  render() {
    const { loading, data } = this.state;
    return (
      <ScrollView>
        <View style={styles.container1}>
          {this.state.loading ? (
            <ActivityIndicator size="large" />
          ) :
          (
            <FlatList 
              data={data}
              renderItem={this.renderItem}
             keyExtractor={this.keyExtractor}
            />
          )}
        </View>
      </ScrollView>
    );
  }
}     
    const styles = StyleSheet.create(
    {
        container1:
        {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },
        ListContainer :{
            borderColor: '#48BBEC',
            backgroundColor: '#000000',
            color:'red',
            alignSelf: 'stretch' ,
        },
        container2:
        {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            paddingHorizontal: 15
        },
        inputBox:{
            width:300,
            borderColor: '#48BBEC',
            backgroundColor: '#F8F8FF',
            borderRadius:25,
            paddingHorizontal:16,
            fontSize:16,
            color:'#000000',
            marginVertical:10, 
        },
        button:{
            width:300,
            backgroundColor:'#4169E1',
            borderRadius:25,
            marginVertical:10,
            paddingVertical:16
        },
        buttonText:{
        fontSize:16,
        fontWeight:'500',
        color:'#ffffff',
        textAlign:'center'
        },
        item:
        {
            padding: 15
        },
        text:
        {
            fontSize: 18
        },
        button:{
            width:300,
            backgroundColor:'#4169E1',
            borderRadius:25,
            marginVertical:10,
            paddingVertical:16
        },
        buttonText:{
            fontSize:16,
            fontWeight:'500',
            color:'red',
            textAlign:'center'
            },
        separator:
        {
            height: 2,
            backgroundColor: 'rgba(0,0,0,0.5)'
        }
    });

//以下是JSON响应

{
  "issueData": [{
    "criLevel": 1,
    "dateTime": "2018-12-24Z",
    "desc": "111",
    "id": 1,
    "initiatedBy": "1",
    "invId": 1,
    "issueTypeId": 4,
    "statusId": 1
  }, {
    "criLevel": 1,
    "dateTime": "2018-12-24Z",
    "desc": "222",
    "id": 2,
    "initiatedBy": "1",
    "invId": 1,
    "issueTypeId": 4,
    "statusId": 1
  }, {
    "criLevel": 3,
    "dateTime": "2018-12-24Z",
    "desc": "222",
    "id": 3,
    "initiatedBy": "1",
    "invId": 1,
    "issueTypeId": 4,
    "statusId": 1
  }, {
    "criLevel": 4,
    "dateTime": "2018-12-24Z",
    "desc": "222",
    "id": 4,
    "initiatedBy": "1",
    "invId": 1,
    "issueTypeId": 4,
    "statusId": 1
  }],
  "success": "true"
}

谢谢

Answer 1

您可以根据" crilevel"

更改项目样式

renderItem = ({ item }) => (
<TouchableOpacity
  style={[styles.item, {color: getColor(item)}}
  activeOpacity={0.4}
  onPress={() => {
    this.clickedItemText(item);
  }}>
  <Text style={styles.buttonText}>Id {item.id}</Text>
  <Text>Hospital Name {item.desc}</Text>
  <Text>User {item.initiatedBy}</Text>
  <Text>Date {item.dateTime}</Text>
</TouchableOpacity>
);

getColor = (item) => {
  switch(item.criLevel) {
     case 3:
        return "yellow"
     ....
  }
}