Как отобразить значение массива по группам в React Native - PullRequest
Новая
       71

Как отобразить значение массива по группам в React Native

1 голос
/ 19 марта 2020

Здесь В моем коде customerSearch - это массив, который я получаю некоторое значение. Теперь я пытаюсь отобразить это значение таким образом, как если бы оно отображалось в пользовательском интерфейсе, оно должно быть в группе в соответствии с ключом.

Как и customer - ключ внутри этого ключа, есть массив и два значения там, так что первый клиент приходит и ниже, что два значения массива, а затем снова следующий ключ и их значения. То же самое для других ключей. 

 customerSearch[
      {
        "key": "customer",
        "data": [
          {
            "name": "John",
            "status": "Active",
            "nationalId": "NBGVH6676"
          },
          { "name": "Abhi",
            "status": "Active",
            "nationalId": "NBGVH6890"}
        ]
      },
      {
        "key": "requests",
        "data": [
          {
            "name": "Kartik",
            "status": "Active",
            "nationalId": "K0089"
          },
          { "name": "Ashi",
            "status": "Active",
            "nationalId": "AS420"

          }
        ]
      },
      {
        "key": "invoice",
        "data": [
          {
            "name": "John",
            "status": "Active",
            "nationalId": "IN998"
          },
          { "name": "Abhi2",
            "status": "Active",
            "nationalId": "ABh007"

          }
        ]
      },
      {
        "key": "offering",
        "data": [
          {},
          {}
        ]
      }
    ]

Ниже кода в функции рендеринга 

 <View style={{ marginLeft: 5, marginRight: 5, marginTop: 10, backgroundColor: '#f1f1f1' }}>
            {this.props.customerSearch.map(
              (data, index) => {
                return (
                  <View style={{ marginBottom: 10, marginLeft: 5, marginRight: 5 }} key={index}>
                    <Card>
                      <CardItem header style={{ backgroundColor: '#fff', width: '100%', justifyContent: 'space-between', borderBottomColor: '#f1f1f1', borderBottomWidth: 1 }}>
                        <View style={{ flexDirection: 'column', justifyContent: 'space-between' }}>
                          <View>
                            <RegularText text={`${data.key}`} style={{ fontWeight: 'bold', flexWrap: 'wrap' }} />
                            <SmallText text={` Name ${""}`} textColor="grey" />
                            <SmallText text={` Status ${""}`} textColor="grey" />
                            <SmallText text={` NationalId ${""}`} textColor="grey" />
                          </View>
                        </View>

                      </CardItem>

                    </Card>
                  </View>
                );
              })
            }
          </View>

Пример отображения пользовательского интерфейса
Клиент
Имя
Статус
Национальный идентификатор
Имя Статус
Национальный идентификатор

Запрос
Имя Статус
Национальный идентификатор
Имя Статус
Национальный идентификатор

1 Ответ

1 голос
/ 19 марта 2020

Вы можете создать макет, используя React Native SectionList , как показано ниже, 

import React, { Component } from 'react';
import { SectionList, Text, View, SafeAreaView } from 'react-native';

const customerSearch = [
  {
    "key": "customer",
    "data": [
      {
        "name": "John",
        "status": "Active",
        "nationalId": "NBGVH6676"
      },
      {
        "name": "Abhi",
        "status": "Active",
        "nationalId": "NBGVH6890"
      }
    ]
  },
  {
    "key": "requests",
    "data": [
      {
        "name": "Kartik",
        "status": "Active",
        "nationalId": "K0089"
      },
      {
        "name": "Ashi",
        "status": "Active",
        "nationalId": "AS420"

      }
    ]
  },
  {
    "key": "invoice",
    "data": [
      {
        "name": "John",
        "status": "Active",
        "nationalId": "IN998"
      },
      {
        "name": "Abhi2",
        "status": "Active",
        "nationalId": "ABh007"

      }
    ]
  },
  {
    "key": "offering",
    "data": [
      {},
      {}
    ]
  }
]


export default class Example extends Component {

  renderItems = ({ item }) => (
    <View style={{padding: 5}}>
      <Text>{`Name - ${item.name}`}</Text>
      <Text>{`Status - ${item.status}`}</Text>
      <Text>{`NationalId - ${item.nationalId}`}</Text>
    </View>
  )

  render() {
    return (
      <SafeAreaView style={{ flex: 1, marginTop: 20 }}>
        <SectionList
          sections={customerSearch}
          keyExtractor={(item, index) => item + index}
          renderSectionHeader={({ section }) => (
            <Text style={{ fontSize: 20, backgroundColor: 'gray' }}>{section.key}</Text>
          )}
          renderItem={this.renderItems}
        />
      </SafeAreaView>
    );
  }
}

Измените его в соответствии с вашими требованиями.

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

...