Question

我有一个数组，其中包含许多项，以与列表类似的方式制作卡片，但改为呈现为卡片并遵循卡片的结构。这是我的数组：

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>

那我该怎么做呢？

Answer 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>
    )
}

我怎样才能使阵列中的卡？

1 个答案: