如何从数组中制作卡片？答案

【问题标题】：How can i make cards out of an array?如何从数组中制作卡片？
【发布时间】：2019-05-02 21:27:28
【问题描述】：

我有一个由许多项目组成的数组，以类似于列表的方式制作卡片，但呈现为卡片并遵循卡片的结构。这是我的数组：

const INFO = [{
    id: 1,
    icon: require("../../../assets/logo.png"),
    title: 'Negocio',
    subtitle: 'Rubro',
    body: 'Descuento',
    accordeon: dataArray }, 
{
    id: 2,
    icon: require("../../../assets/logo.png"),
    title: 'Segundo Negocio',
    subtitle: 'Segundo Rubro',
    body: 'Descuento 2',
    accordeon: dataArray
}];

我想以与这张卡片类似的方式显示它：

          <Container style={styles.container}>
        <Header>
          <Body style={{ flex: 5 }}>
          <Title>Titulo</Title>
          </Body>
          <Right/>
        </Header>

        <Content padder key={item.id}>
          <Card key={index} style={styles.mb}>
            <CardItem bordered>
              <Left>
                <Thumbnail source={item.icon}/>
                <Body>
                <Text>item.title</Text>
                <Text note>item.subtitle</Text>
                </Body>
              </Left>
            </CardItem>

            <CardItem>
              <Body>
              <Text>
                body
              </Text>
              </Body>
            </CardItem>
            <CardItem style={{ paddingVertical: 0 }}>
              <Left>
                <Content padder style={{ backgroundColor: "white" }}>
                  <Accordion dataArray={accordeon} animation={false}/>
                </Content>
              </Left>
            </CardItem>
          </Card>
        </Content>
      </Container>

那我怎样才能让它工作呢？

【问题讨论】：

标签： react-native expo native-base

【解决方案1】：

您可以将卡片数据数组传递到flatlist 并为每个项目呈现一张卡片，如下所示：

export default class CardList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cards: [
                {
                    id: 1,
                    icon: require("../../../assets/logo.png"),
                    title: 'Negocio',
                    subtitle: 'Rubro',
                    body: 'Descuento',
                    accordeon: dataArray
                },
                {
                    id: 2,
                    icon: require("../../../assets/logo.png"),
                    title: 'Segundo Negocio',
                    subtitle: 'Segundo Rubro',
                    body: 'Descuento 2',
                    accordeon: dataArray
                }
            ]
        }
    }

    render() {
        return (
            <FlatList
                data={this.state.cards}
                renderItem={this.renderCard}
            />
        )
    }

    renderCard = ({item}) => (
        <Container style={styles.container}>
            <Header>
                <Body style={{flex: 5}}>
                <Title>Titulo</Title>
                </Body>
                <Right/>
            </Header>

            <Content padder key={item.id}>
                <Card key={index} style={styles.mb}>
                    <CardItem bordered>
                        <Left>
                            <Thumbnail source={item.icon}/>
                            <Body>
                            <Text>item.title</Text>
                            <Text note>item.subtitle</Text>
                            </Body>
                        </Left>
                    </CardItem>

                    <CardItem>
                        <Body>
                        <Text>
                            body
                        </Text>
                        </Body>
                    </CardItem>
                    <CardItem style={{paddingVertical: 0}}>
                        <Left>
                            <Content padder style={{backgroundColor: "white"}}>
                                <Accordion dataArray={accordeon} animation={false}/>
                            </Content>
                        </Left>
                    </CardItem>
                </Card>
            </Content>
        </Container>
    )
}

【讨论】：

非常感谢！