【React Native开发】

来源：互联网发布：godaddy虚拟主机 java 编辑：程序博客网时间：2024/05/17 08:44

首先，需要组件的配置安装：

导入组件：

import ViewPager from 'react-native-viewpager'组件的配置：

dataSource:数据源

renderPager：渲染页面，页面显示的内容

isLoop：是否循环显示

autoPlay：是否自动轮播

locked:设置禁止触摸滚动

onChangePager:页面切换时的回调函数

renderPagerIndicator:渲染指示器

animation:渲染页面时的动画

案例操作：

import React,{Component} from  'react'import {    StyleSheet,    View,    Text,    Image,    Dimensions,    Animated, } from 'react-native'import ViewPager from 'react-native-viewpager'const width = Dimensions.get('window').widthconst height = Dimensions.get('window').heightconst IMG = [require('./images/ic_anhui_huangshan.jpg'),    require('./images/ic_beijing_gugong.jpg'),    require('./images/ic_guangdong_guangzhou.jpg'),    require('./images/ic_guangxi_guizhou.jpg')];export default class Root extends Component{   constructor(props){       super(props)       const dataSource = new ViewPager.DataSource({pageHasChanged:(p1,p2) => p1 != p2})       this.state = {           dataSource:dataSource.cloneWithPages(IMG)       }   }    _renderPager(data,pageID){        return (            <Image                style={styles.imageStyle}                source={data}>            </Image>        )    }    render(){        return (            <View style={styles.container}>                <ViewPager                 style={styles.pagerStyle}                    dataSource={this.state.dataSource}                    renderPage={this._renderPager}                    isLoop={true}                    autoPlay={true}                    animation = {(animatedValue, toValue, gestureState) => {                    var velocity = Math.abs(gestureState.vx);                    var baseDuration = 300;                    var duration = (velocity > 1) ? 1/velocity * baseDuration : baseDuration;                        return Animated.timing(animatedValue,                    {                        toValue: toValue,                        duration: duration,                        easing: Easing.out(Easing.exp)                    });                 }}>                </ViewPager>            </View>        )    }}const styles = StyleSheet.create({    container:{        flex:1    },    pagerStyle:{        height:height/3,        width:width,    },    imageStyle:{        flex:1,        height: height/3,        resizeMode: 'stretch'    },
})运行结果：

0 0