javascript - Custom Grid view using FlatList in Reat Native using json data?

Question

Actually,I want to create a grid view using the FlatList. I have a read lot of solutions they all are creating the view by the array of an object means, [{key:1},{key:2},{key:3}]. My JSON data structure is different because i also added the parent and ChildviewId which is use to render the view according their viewId . i have write the code which is render the view in grid as per the child viewId

 render() {
    return (
      <FlatList
       
        numColumns={2}
        data={data.items}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item, index}) => (
          <View style={styles.GridViewContainer}>
            <View style={{width: Size.p19}}>
              <InfoCard item={item} key={index} />
            </View>
          </View>
        )}
        
      />
)

But, how can i render the views in grid according to parent viewId Here's my data structure:

{
  "id": 1,
  "ParentviewId": 1,
  "items": [
    {
      "id": "1",
      "title": "Power",
      "value": "50 MW",
      "icon": "cogs",
      "refresh": "refresh",
      "subText": "Update Now",
      "colour": "#327fa8",
      "childviewId": 2
    },
    {
      "id": "2",
      "title": "Revenue",
      "value": "$,1345",
      "icon": "money",
      "refresh": "refresh",
      "subText": "Last Day",
      "colour": "#5832a8",
      "childviewId": 1
    },

    {
      "id": "3",
      "title": "Followers",
      "value": "+45K",
      "icon": "users",
      "refresh": "refresh",
      "subText": "Update Now",
      "colour": "#a8329e",
      "childviewId": 1
    },
    {
      "id": "4",
      "title": "Total users",
      "value": "+15K",
      "icon": "user",
      "refresh": "refresh",
      "subText": "Update Now",
      "colour": "#8f1e35",
      "childviewId": 1
    },
    {
      "id": "5",
      "title": "Capicity",
      "value": "50 GB",
      "icon": "cog",
      "refresh": "refresh",
      "subText": "Update Now",
      "colour": "#ff5757",
      "childviewId": 1
    },
    {
      "id": "6",
      "title": "Employees",
      "value": "+10K",
      "icon": "briefcase",
      "refresh": "refresh",
      "subText": "Update Now",
      "colour": "#e0243d",
      "childviewId": 2
    }
  ]
}

My Code:

 render() {
    return (
      <FlatList
       
        numColumns={2}
        data={data}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item, index}) => (
          <View style={styles.GridViewContainer}>
            <View style={{width: Size.p19}}>
              <InfoCard item={item} key={index} />
            </View>
          </View>
        )}
        
      />
)
      

This is my Component code to map the data:

  const InfoCard = ({item}) => {
  return (
   
      <Card style={styles.cardShadow}>
        <View style={styles.cardLayout}>
          <View style={styles.topSection}>
            <View style={styles.cardView}>
              <View style={styles.cardIcon}>
                <Icon.FontAwesome
                  name={item.icon}
                  size={widthToDp(Size.O12)}
                  color={item.colour}
                />
              </View>
              <View style={styles.cardText}>
                <Text numberOfLines={1} style={styles.mainTitle}>
                  {item.title}
                </Text>
                <Text numberOfLines={1} style={styles.mainValue}>
                  {item.value}
                </Text>
              </View>
            </View>
          </View>

          {item.childviewId && item.childviewId === 2 ? (
            <React.Fragment>
              <View style={styles.midSection}>
                <View style={styles.lineStyle} />
              </View>
              <View style={styles.bottomSection}>
                <View style={styles.bottomLayout}>
                  <View style={styles.bottomItem1}>
                    <Icon.FontAwesome
                      name={item.refresh}
                      size={widthToDp(Size.O6)}
                      color={Color.gray}
                    />
                  </View>
                  <View style={styles.bottomItem2}>
                    <Text style={{fontSize: widthToDp(Size.s16)}}>
                      {item.subText}
                    </Text>
                  </View>
                </View>
              </View>
            </React.Fragment>
          ) : null}
        </View>
      </Card>
  );
};

Answer 1

等待大神答复