如何在 React Native 中按組顯示數組值

Question

在我的代碼中， customerSearch是一個數組，我得到了一些價值。 現在我試圖以這種方式映射這個值，就像它顯示在 UI 上一樣，它應該根據鍵分組。

就像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>

示例 UI 顯示
顧客
姓名
地位
國民身份證
姓名 狀態
國民身份證

要求
姓名 狀態
國民身份證
姓名 狀態
國民身份證

Answer 1

您可以使用 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>
    );
  }
}

根據您的要求更改此設置。

希望這對你有幫助。 如有疑問，請放心。