如何在Native Base折叠面板中正确使用JSX布局变量内容

Native Base v2的Accordion组件支持直接在dataArray的content字段中传入JSX元素，完全不需要通过字符串拼接来实现布局。以下是满足你需求的具体实现方案：

核心实现思路 #

• 抛弃字符串拼接的方式，将execDetailData中的每一项映射为独立的JSX元素
• 借助React Native的Flexbox布局，精准控制elem.Parameters_String和elem.Sampling_Method_Code的显示位置（左侧/右侧、顶部/底部）

修改后的完整代码 #

import { Container, Header, Content, Accordion, View, Text } from "native-base";
import { useState } from "react";

const AccordionExample = () => {
  const [execDetailData, setExecDetailData] = useState([]);

  // 生成自定义JSX内容，替代原字符串拼接逻辑
  const renderAccordionContent = () => {
    return execDetailData.map((elem, index) => (
      <View key={index} style={{ marginVertical: 8 }}>
        {/* 左右布局：Parameters_String居左，Sampling_Method_Code居右 */}
        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
          <Text>{elem.Parameters_String}:parameters</Text>
          <Text>{elem.Sampling_Method_Code}</Text>
        </View>

        {/* 若需要上下布局，替换为下面的代码 */}
        {/*
        <View style={{ flexDirection: 'column' }}>
          <Text>{elem.Parameters_String}:parameters</Text>
          <Text style={{ marginTop: 4 }}>{elem.Sampling_Method_Code}</Text>
        </View>
        */}
      </View>
    ));
  };

  const dataArray = [
    {
      title: 'apple',
      content: renderAccordionContent(), // 直接传入JSX内容
    },
  ];

  return (
    <Container>
      <Header />
      <Content padder>
        <Accordion dataArray={dataArray} />
      </Content>
    </Container>
  );
};

export default AccordionExample;

关键修改说明 #

1. 补充依赖组件：新增View和Text组件，用于构建自定义排版结构
2. 重构内容生成逻辑：用map遍历execDetailData，为每一条数据生成对应的JSX布局
3. Flexbox布局控制：
   • 左右分布：通过flexDirection: 'row' + justifyContent: 'space-between'实现元素分置两侧
   • 上下排布：通过flexDirection: 'column' + marginTop控制垂直间距
4. 直接传入JSX：dataArray的content字段支持直接接收JSX元素，无需转为字符串

通过这种方式，你可以灵活调整变量的显示位置，实现更美观、易维护的自定义布局。

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