1.项目地址
https://github.com/race604/react-native-viewpager
2.Usage
- Run
npm install react-native-viewpager --save
- Code like this:
var ViewPager = require('react-native-viewpager');
<ViewPager
dataSource={this.state.dataSource}
renderPage={this._renderPage}/>
More configuration
dataSource
: this is require to provide pages data,renderPage
: this is require to render page view,autoPlay
:true
to turn page automatically,isLoop
:true
to run in infinite scroll mode,locked
:true
to disable touch scroll,onChangePage
: page change callback,renderPageIndicator
: render custom ViewPager indicator.
Page Transition Animation Controls
animation
: function that returns a React Native Animated configuration.
Example:
var ViewPager = require('react-native-viewpager');
<ViewPager
dataSource={this.state.dataSource}
renderPage={this._renderPage}
animation = {(animatedValue, toValue, gestureState) => {
// Use the horizontal velocity of the swipe gesture
// to affect the length of the transition so the faster you swipe
// the faster the pages will transition
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)
});
}}
/>
3.效果图
4.实例代码
'use strict';
import React, {
Component,
View,
Image,
Dimensions,
StyleSheet
} from 'react-native';
import ViewPager from 'react-native-viewpager';
var deviceWidth = Dimensions.get('window').width;
const BANNER_IMGS = [
require('./images/banner/1.jpg'),
require('./images/banner/2.jpg'),
require('./images/banner/3.jpg'),
require('./images/banner/4.jpg')
];
export default class MyViewPager extends React.Component {
constructor(props) {
super(props);
// 用于构建DataSource对象
var dataSource = new ViewPager.DataSource({
pageHasChanged: (p1, p2) => p1 !== p2,
});
// 实际的DataSources存放在state中
this.state = {
dataSource: dataSource.cloneWithPages(BANNER_IMGS)
}
}
_renderPage(data, pageID) {
return (
<Image
source={data}
style={styles.page}/>
);
}
/**
dataSource: 提供页面数据,
renderPage: 用于渲染页面视图,
autoPlay: 为true 将自动播放,
isLoop: 为true支持循环播放,
locked: 为true禁止触摸滚动,
onChangePage: 页面变化的回调,
renderPageIndicator: 渲染自定义的 ViewPager indicator.
*/
render() {
return (
<View style={styles.container}>
<ViewPager
style={{height:130}}
dataSource={this.state.dataSource}
renderPage={this._renderPage}
isLoop={true}
autoPlay={true}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start',
paddingTop:5,
paddingLeft:5,
backgroundColor:'#999999',
paddingRight:5,
paddingBottom:5,
},
page: {
width: deviceWidth,//设备宽(只是一种实现,此处多余)
flex: 1,
height: 130,
resizeMode: 'stretch'
},
});