Question

在这里，我在Flatlist上填充JSON值，并且可以正常工作，但是现在我必须更改每个列表的颜色，例如在JSON值中，存在字段“ criLevel”，当其值为1时应该是正常的，如果3然后是黄色，4然后是红色。因此，请帮助我，如果其他方法不起作用，该如何使用呢？请帮助

    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"
     ....
  }
}

如何在FlatList react-native中更改每个列表项的不同颜色

1 个答案: