react-native-snap-carouselを使ってみる

やりたいこと

• ReactNativeの画面にカルーセルを入れたい（広告バナーでの利用をイメージ）

準備

react-native-snap-carouselを使ってみます。loopやautoplayとかできて便利そう。

npm install --save react-native-snap-carousel

実装

めんどいのでApp.jsに全部書いてみます。

App.js

App.js

import React from 'react';
import { StyleSheet, Text, View, Dimensions, SafeAreaView, TouchableHighlight, Image, Linking } from 'react-native';
import Carousel, { Pagination } from 'react-native-snap-carousel';

export default class App extends React.Component {

    state = {
        data: [
            { title: 'a', url: 'http://www.bluecode.jp/images/A.png' },
            { title: 'b', url: 'http://www.bluecode.jp/images/B.png' },
            { title: 'c', url: 'http://www.bluecode.jp/images/C.png' },
            { title: 'd', url: 'http://www.bluecode.jp/images/D.png' },
            { title: 'e', url: 'http://www.bluecode.jp/images/E.png' },
        ],
        activeSlide: 0,
    }
   
	
	//カルーセルの中身
    _renderItem = ({ item, index }) => {
        return (
            <TouchableHighlight
                onPress={() => Linking.openURL(item.url)}
            >
                <Image source={{ url: item.url }} style={{ width: '100%', height: '100%' }} />
            </TouchableHighlight>
        );
    }

    render() {
        return (
            <SafeAreaView style={{ height: 240 }}>
                <Carousel
                    data={this.state.data}
                    renderItem={this._renderItem}
                    itemWidth={Dimensions.get("window").width * 0.6}
                    sliderWidth={Dimensions.get("window").width * 1.0}
                    // containerCustomStyle={{ flex: 1, backgroundColor: "#eee" }}
                    onSnapToItem={index => this.setState({ activeSlide: index })} //for pagination
                    loop
                    autoplay
                />
                <Pagination
                    dotsLength={this.state.data.length} //dotの数
                    activeDotIndex={this.state.activeSlide} //どのdotをactiveにするか
                    containerStyle={{paddingVertical:15}} //デフォルトではちと広い
                />
            </SafeAreaView>
        );
    }
}