Question

我正在使用NativeBase，并且我有一个动态手风琴，我想将来自NativeBase组件的动态列表放入dataArray的内容中，这可能吗？这是代码：

import React, { Component } from "react";
import { Container, Header, Content, Accordion } from "native-base";
const dataArray = [
  { title: "First Element", content: "Lorem ipsum dolor sit amet" },
  { title: "Second Element", content: "Lorem ipsum dolor sit amet" },
  { title: "Third Element", content: "Lorem ipsum dolor sit amet" }
];
export default class AccordionIconExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content padder>
          <Accordion dataArray={dataArray} icon="add" expandedIcon="remove" />
        </Content>
      </Container>
    );
  }
}

Answer 1

import React, { Component } from "react";
import { StyleSheet } from "react-native";
import { Container, Header, Content, Accordion, Button,Text } from "native-base";
const dataArray = [
 { title: "First Element", content: "Lorem ipsum dolor sit amet" },
 { title: "Second Element", content: "Lorem ipsum dolor sit amet" },
 { title: "Third Element", content: "Lorem ipsum dolor sit amet" }
];

export default class App extends Component {

constructor(props) {
 super(props);

 this.state = {
  acc : dataArray
 }
}

addAccordian = () =>{
this.setState({
  acc: this.state.acc.concat( { title: "Forth Element", content: "asdsa asdasd asdas" })
 })
}

render() {
 return (
   <Container>
   <Button onPress={()=> this.addAccordian()}>
   <Text>Click Me!</Text>
 </Button>
    <Header />
    <Content padder>
      <Accordion dataArray={this.state.acc} icon="add" expandedIcon="remove" />
    </Content>
  </Container>
  );
 }
}

动态列表内的动态列表

1 个答案: