react-native viewpager用法

用到的框架

react-native-community/viewpager

yarn add @react-native-community/viewpager

import React, {Component} from 'react';
import {Image, StyleSheet,TouchableOpacity, Text, View} from 'react-native';
import ViewPager from '@react-native-community/viewpager';
export default class ViewPagerAndroidPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            page: 0,
        };
    }

    onPageSelected = (e) => {
        this.setState({page: e.nativeEvent.position});
    };

    render() {
        let images = [
            'http://doc.zwwill.com/yanxuan/imgs/banner-1.jpg',
            'http://doc.zwwill.com/yanxuan/imgs/banner-2.jpg',
            'http://doc.zwwill.com/yanxuan/imgs/banner-3.jpg'
        ];
        let pageViews = [];
        for (let i = 0; i < images.length; i++) {
            pageViews.push(
                
                
            );
        }
        return (
            
                
                    {pageViews}
                
                当前第{this.state.page + 1}页
            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    imageStyle: {
        height: 180,
        padding: 20,
    },
    viewPagerStyle: {
        height: 180,
    },
    txtStyle: {
        flex: 1,
        textAlign: 'center',
        marginTop: 10
    },
});