如何在React Native中按组显示数组值

debugcn 发表于 Dev

阿比吉安·高拉夫（Abhigyan gaurav）

这在我的代码中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显示示例
客户
名称
状态
国家ID
名称状态
国家ID

请求
名称状态
国家ID
名称状态
国家ID

都山

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

根据您的要求进行更改。

希望这对您有所帮助。如有疑问，请放心。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。