Tuesday 21 January 2020

NativeBase DeckSwiper





import React, { Component } from 'react';
import { Image } from 'react-native';
import {
  Container, Header, Title, Content, Footer,
  FooterTab, Button, Left, Right, Body, Icon, Text,
  Accordion, Card, CardItem, Thumbnail, ListItem,
  CheckBox, DatePicker, DeckSwiper, View,
} from 'native-base';

const cards = [
  {
    text: 'Card One',
    name: 'One',
    image: require('./image/1.jpg'),
  },
  {
    text: 'Card Two',
    name: 'Two',
    image: require('./image/2.jpg'),
  },
  {
    text: 'Card Three',
    name: 'Three',
    image: require('./image/3.jpg'),
  },
]

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  render() {
    return (
      <Container>
        <Header>
          <Body>
            <Title>DeckSwiper</Title>
          </Body>
        </Header>
        <View>
          <DeckSwiper
            dataSource={cards}
            renderItem={item =>
              <Card style={{ elevation: 3 }}>
                <CardItem>
                  <Left>
                    <Thumbnail source={item.image} />
                    <Body>
                      <Text>{item.text}</Text>
                      <Text note>NativeBase</Text>
                    </Body>
                  </Left>
                </CardItem>
                <CardItem cardBody>
                  <Image style={{ height: 300, flex: 1 }} source={item.image} />
                </CardItem>
                <CardItem>
                  <Icon name="heart" style={{ color: '#ED4A6A' }} />
                  <Text>{item.name}</Text>
                </CardItem>
              </Card>
            }
          />
        </View>
      </Container>
    );
  }
}

No comments:

Post a Comment