React Native中如何用单个Accordion渲染不同键值对象数组的表格内容

核心思路 #

放弃硬编码的字段读取逻辑，通过动态遍历content对象的所有键值对生成Grid表格，兼容任意结构的content数据。

具体实现步骤 #

• 第一步：在Accordion的renderContent回调函数中，先拿到当前项的content对象
• 第二步：用Object.entries()方法将content对象转换为[键名, 键值]格式的二维数组，动态获取所有字段
• 第三步：遍历二维数组，用Grid的行、列组件逐行渲染键名（表头列）和键值（内容列）

示例代码（基于react-native-elements Accordion + react-native-easy-grid实现） #

import { Accordion } from '@rneui/themed';
import { Grid, Row, Col } from 'react-native-easy-grid';
import { Text, View } from 'react-native';

// 你原有的Court数组示例
const Court = [
  { title: '中间申请XXX', content: { RegNo: '12345', Particular: '申请延期举证' } },
  { title: '案件详情XXX', content: { DiaryNo: 'D2024001', CaseNo: '（2024）粤0306民初1234号' } }
];

const renderAccordionContent = (item) => {
  const contentPairs = Object.entries(item.content);
  return (
    <Grid>
      {/* 动态遍历所有键值对生成表格行 */}
      {contentPairs.map(([key, value], index) => (
        <Row key={index} style={{ paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#eee' }}>
          <Col size={1} style={{ paddingHorizontal: 12 }}>
            <Text style={{ fontWeight: '500' }}>{key}</Text>
          </Col>
          <Col size={2} style={{ paddingHorizontal: 12 }}>
            <Text>{value || '-'}</Text>
          </Col>
        </Row>
      ))}
    </Grid>
  );
};

// 组件中渲染Accordion
const CourtAccordion = () => {
  return (
    <Accordion
      sections={Court}
      renderTitle={(item) => <Text style={{ padding: 16, fontSize: 16, fontWeight: 'bold' }}>{item.title}</Text>}
      renderContent={renderAccordionContent}
    />
  );
};

export default CourtAccordion;

优化可选方案 #

如果需要将键名转换为中文显示（比如把RegNo显示为「申请编号」），可以提前定义字段映射字典：

const FIELD_NAME_MAP = {
  RegNo: '申请编号',
  Particular: '申请事项',
  DiaryNo: '台账编号',
  CaseNo: '案号'
};

// 渲染列的时候替换键名即可
<Text style={{ fontWeight: '500' }}>{FIELD_NAME_MAP[key] || key}</Text>

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