React Native中如何按指定差异化布局遍历JSON数组并渲染元素？

嘿，这个布局其实很好实现，核心思路是先把数组拆分成不同的部分：第一个元素单独渲染，剩下的元素每两个为一组，用Grid和Col包裹起来。之前直接用map没成功，应该是没处理好数据的分组逻辑，咱们一步步来解决：

步骤1：拆分数据 #

首先把原始数组拆成三部分：第一个单独的元素，剩下的元素再分成每两个一组。这样就能完美对应你要的布局结构：

const data = [
  { "id": 1, "title": "Title 1", "description": "descriptions 1" },
  { "id": 2, "title": "Title 2", "description": "descriptions 2" },
  { "id": 3, "title": "Title 3", "description": "descriptions 3" },
  { "id": 4, "title": "Title 4", "description": "descriptions 4" },
  { "id": 5, "title": "Title 5", "description": "descriptions 5" }
];

// 提取第一个元素
const firstItem = data[0];
// 获取剩下的所有元素
const remainingItems = data.slice(1);
// 将剩下的元素每两个分成一组
const groupedItems = [];
for (let i = 0; i < remainingItems.length; i += 2) {
  groupedItems.push(remainingItems.slice(i, i + 2));
}

步骤2：编写组件并渲染 #

接下来咱们实现布局组件。这里假设你没有使用第三方UI库，所以先简单实现Grid、Col和Item组件（如果用的是Native Base、React Native Elements这类库，直接替换成对应的组件即可）：

import React from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';

// 自定义Grid组件：横向排列子元素
const Grid = ({ children }) => (
  <View style={styles.grid}>{children}</View>
);

// 自定义Col组件：平分Grid的宽度
const Col = ({ children }) => (
  <View style={styles.col}>{children}</View>
);

// 自定义Item组件：渲染标题和描述
const Item = ({ title, description }) => (
  <View style={styles.item}>
    <Text style={styles.cardText}>{title}</Text>
    <Text style={styles.cardText} numberOfLines={2}>{description}</Text>
  </View>
);

export default function CustomLayout() {
  const data = [
    { "id": 1, "title": "Title 1", "description": "descriptions 1" },
    { "id": 2, "title": "Title 2", "description": "descriptions 2" },
    { "id": 3, "title": "Title 3", "description": "descriptions 3" },
    { "id": 4, "title": "Title 4", "description": "descriptions 4" },
    { "id": 5, "title": "Title 5", "description": "descriptions 5" }
  ];

  // 拆分数据
  const firstItem = data[0];
  const remainingItems = data.slice(1);
  const groupedItems = [];
  for (let i = 0; i < remainingItems.length; i += 2) {
    groupedItems.push(remainingItems.slice(i, i + 2));
  }

  return (
    <ScrollView style={styles.container}>
      {/* 渲染第一个单独的Item */}
      <Item 
        title={firstItem.title} 
        description={firstItem.description} 
      />

      {/* 渲染分组后的Grid布局 */}
      {groupedItems.map((group, gridIndex) => (
        <Grid key={`grid-${gridIndex}`}>
          {group.map(item => (
            <Col key={item.id}>
              <Item 
                title={item.title} 
                description={item.description} 
              />
            </Col>
          ))}
        </Grid>
      ))}
    </ScrollView>
  );
}

// 样式定义
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  grid: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginVertical: 10,
  },
  col: {
    flex: 1,
    marginHorizontal: 5,
  },
  item: {
    backgroundColor: '#f8f8f8',
    padding: 15,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3, // Android阴影
  },
  cardText: {
    fontSize: 16,
    color: '#333',
    marginBottom: 6,
  },
});

关键说明 #

1. 数据分组逻辑：通过循环把剩下的元素每两个分成一组，不管后续数组长度是多少（比如7个元素的话，最后一组会只有1个元素），这个逻辑都能适配。
2. 组件复用：把Item、Grid、Col抽成独立组件，方便后续维护和样式调整。
3. Key属性：给每个动态渲染的元素加上唯一的key，这是React渲染列表的必备要求，能提升性能并避免警告。

如果你的项目里已经有现成的Grid和Col组件（比如来自UI库），直接替换掉自定义的版本就行，核心的渲染逻辑是一致的。

内容的提问来源于stack exchange，提问作者KhacNha