如何解决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}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。