使用 Animated 实现的轮播组件

Pager.jsx

/**
 * 使用 Animated View 实现的轮播
 * 嵌套在 ListView/FlatList 中效果不好！
 */

'use strict';
var React = require('react');
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    Image,
    ScrollView,
    TouchableHighlight,
} from 'react-native';

var ViewPager = require('./ViewPager');// git clone https://github.com/race604/react-native-viewpager.git

var deviceWidth = Dimensions.get('window').width;

var IMGS = [
    'https://images.unsplash.com/photo-1441742917377-57f78ee0e582?h=1024',
    'https://images.unsplash.com/photo-1441716844725-09cedc13a4e7?h=1024',
    'https://images.unsplash.com/photo-1441448770220-76743f9e6af6?h=1024',
    'https://images.unsplash.com/photo-1441260038675-7329ab4cc264?h=1024',
    'https://images.unsplash.com/photo-1441126270775-739547c8680c?h=1024',
    'https://images.unsplash.com/photo-1440964829947-ca3277bd37f8?h=1024',
    'https://images.unsplash.com/photo-1440847899694-90043f91c7f9?h=1024'
];

var count = 0;

var Pager = React.createClass({
    getInitialState: function() {
        var dataSource = new ViewPager.DataSource({
            pageHasChanged: (p1, p2) => p1 !== p2,
        });
        return {
            dataSource: dataSource.cloneWithPages(IMGS),
            page: 0
        };
    },

    render: function() {
        return (
            <View style={styles.container}>
              <ScrollView contentContainerStyle={styles.scrollview}
                          scrollEnabled={false}
                          showsHorizontalScrollIndicator={false}
                          showsVerticalScrollIndicator={false}
                          automaticallyAdjustContentInsets={false}
                          horizontal={true}
                          iosdirectionalLockEnabled={true}
                          bounces={false} >
                <ViewPager ref={(viewpager) => {this.viewpager = viewpager}}
                           style={this.props.style}
                           dataSource={this.state.dataSource}
                           renderPage={this._renderPage}
                           isLoop={true}
                           autoPlay={false} />
              </ScrollView>
            </View>
        );
    },

    _renderPage: function( data: Object, pageID: number | string) {
        return (
            <Image source={{uri: data}}
                   style={styles.page} />
        );
    },
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        height: 200,
    },
    scrollview: {
        height: 200,
        width: deviceWidth,
    },
    page: {
        width: deviceWidth,
    }
});

module.exports = Pager;