Как я могу сделать карты из массива? - PullRequest
Новая
       26

Как я могу сделать карты из массива?

0 голосов
/ 03 мая 2019

У меня есть массив, состоящий из множества элементов, чтобы создать карту аналогично списку, но вместо этого она отображается как карты и соответствует структуре одного. Это мой массив: 

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>

Так, как я мог заставить это работать?

1 Ответ

0 голосов
/ 03 мая 2019

Вы можете передать массив данных вашей карты в плоский список и отобразить карту для каждого элемента, например: 

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