nativeBase deckSwiper onSwipeRight/onSwipeLeftで現在のカードの情報を取得する。 #reactnative

2017/12/5

import React, { Component } from 'react';
import { Image } from 'react-native';
import { Container, Header, View, DeckSwiper, Card, CardItem, Thumbnail, Text, Left, Body, Icon } from 'native-base';
const cards = [
  {
    text: 'Card One',
    name: 'One',
    image: require('./img/swiper-1.png'),
  },
　{
    text: 'Card Two',
    name: 'Two',
    image: require('./img/swiper-2.png'),
  },
  .  .  .// 繰り返しの意
];
export default class DeckSwiperExample extends Component {
  render() {
    return (
      <Container>
        <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>
    );
  }
}

onSwipeRight={() => Alert.alert('Hi!')}

で、右にスワイプすると、アラートでHi

onSwipeRight={item => Alert.alert(item.text)}

で、右にスワイプすると、アラートで、今のページのタイトルが表示される。
またconst cardsの中に、description: 'Awesome'などと入れると、
item.descriptionなどと参照できる。
これさえ分かれば、大体のことは出来る。

また25枚以上デッキを増やせないようで、nativeBaseの問題でなく、
paginationの問題らしい。
(nativeBaseはviewのみ扱う)（今どうなってるかはわからない）