react native：在我的示例中如何显示表格在手风琴中？

问题描述

在我的示例中，我分别展示了一个手风琴和一张桌子，我想知道如何在手风琴中展示桌子。

这是我想将手风琴放在桌子中的样式，如下例所示：

import React,{ Component } from "react";
import { Container,Header,Content,Accordion } from "native-base";
const dataArray = [
  { title: "First Element",content: "**I WANT PUT HERE THE TABLE**" },{ title: "Second Element",content: "BO" },{ title: "Third Element",content: "MO" }
];
export default class AccordionHeaderContentStyleExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content padder>
          <Accordion
            dataArray={dataArray}
            headerStyle={{ backgroundColor: "#b7daf8" }}
            contentStyle={{ backgroundColor: "#ddecf8" }}
          />
        </Content>
      </Container>
    );
  }
}

这是我要放在上面“第一元素”手风琴的“内容”中的表：

import React,{ Component } from 'react';
import { StyleSheet,View } from 'react-native';
import { Table,Row,Rows } from 'react-native-table-component';
 
export default class ExampleOne extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['Head','Head2','Head3','Head4'],tableData: [
        ['1','2','3','4'],['a','b','c','d'],['1','456\n789'],'d']
      ]
    }
  }
 
  render() {
    const state = this.state;
    return (
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 2,borderColor: '#c8e1ff'}}>
          <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
          <Rows data={state.tableData} textStyle={styles.text}/>
        </Table>
      </View>
    )
  }
}
 
const styles = StyleSheet.create({
  container: { flex: 1,padding: 16,paddingTop: 30,backgroundColor: '#fff' },head: { height: 40,backgroundColor: '#f1f8ff' },text: { margin: 6 }
});

解决方法

尝试一下可能会帮助

import ExampleOne from "../components/ExampleOne";

// ExampleOne is the component that should be rendered inside content of dataArray
renderExampleOne = () => {
  return <ExampleOne />;
};

const dataArray = [
  { title: "First Element",content: this.renderExampleOne() },{ title: "Second Element",content: "BO" },{ title: "Third Element",content: "MO" }
];

renderContent(item: ArrayContent) {
   return item.content;
}


<Accordion
   dataArray={dataArray}
   headerStyle={{ backgroundColor: "#b7daf8" }}
   contentStyle={{ backgroundColor: "#ddecf8" }}
   renderContent={this.renderContent}
/>