react-native-snap-carouselの基本

react-native-snap-carouselはreact-nativeにおけるcarouselの決定版だ（今のところ）
自作した方が柔軟性は高いが、、、
基本的な使い方は以下のような感じ

import React, { PureComponent } from "react";
import { Dimensions, StyleSheet, View } from "react-native";

import Carousel from "react-native-snap-carousel";

export default class ExampleCarousel extends PureComponent {
  state = {
    data: [{}, {}, {}, {}, {}, {}]
  };

  renderItem = () => <View style={styles.tile} />;

  render() {
    return (
      <View style={styles.container}>
        <Carousel
          data={this.state.data}
          renderItem={this.renderItem}
          itemWidth={Dimensions.get("window").width * 0.85}
          sliderWidth={Dimensions.get("window").width}
          containerCustomStyle={styles.carousel}
          slideStyle={{ flex: 1 }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: 300
  },
  carousel: {
    flex: 1,
    backgroundColor: "red"
  },
  tile: {
    flex: 1,
    width: Dimensions.get("window").width * 0.85,
    backgroundColor: "yellow"
  }
});

こんな感じでスワイプできる写真が簡単に出来る

TouchableOcacityを絡めたい時は、

renderItem = () => <View style={styles.tile} />;

を

  _onPressCarousel = () => {
    // here handle carousel press
  };
  renderItem = () => (
    <TouchableOpacity onPress={this._onPressCarousel} style={styles.tile}>
      <Image style={styles.button} source={require("../img/Sample.jpg")} />
    </TouchableOpacity>
  );

上の様にに書き換えればok
いいね欲しいです

loopでループさせることが出来、
autoplayで、自動再生出来る。
enableMomentumで指を離した時、ゆっくりスライドを元の位置に戻すようになる。
これは横移動に時間がかかるのでおすすめしない。

      <Carousel
        data={this.state.data}
        renderItem={this.renderItem}
        itemWidth={width * 0.85}
        sliderWidth={width}
        containerCustomStyle={styles.carousel}
        slideStyle={{ flex: 1 }}
        keyExtractor={this._keyExtractor}
        loop
        autoplay
      />

parallaxImageを使うと、立体的に見せてくれるそうですが、
まだ使い方が分からないw