React-Native之ViewPagerAndroid的使用

刚接触React－Native不久，我就被深深折服了。

前几天做项目用到了ViewPager做广告页，在研究了一番官方文档之后，终于也是大体做出来了，今天就分享给大家吧。

其实，大家如果使用过Android的ViewPager，那么你可能会很容易的去理解这个组件了。

下面是实现的代码（涉及到ViewPager实现的我会标出）：

use strict';

var React = require('react-native');
var FirstPage = require('./firstPage');
var SecondPage = require('./secondPage');
var ThirdPage = require('./thirdPage');
var ForthPage = require('./forthPage');
var FifthPage = require('./fifthPage');
var NavBar = require('rn-navbar');

var Dimensions = require('Dimensions');

var {
Image,
StyleSheet,
Text,
TouchableWithoutFeedback,
TouchableOpacity,
View,
ViewPagerAndroid,
Navigator,
TouchableOpacity,
} = React;

var PAGES = 5;
var BGCOLOR = ['#fdc08e', '#fff6b9', '#99d1b7', '#dde5fe'];//
var deviceWidth = Dimensions.get('window').width;
var deviceHeight = Dimensions.get('window').height;

var ViewPagerAndroidExample = React.createClass({
getInitialState: function() {//初始化viewpager
return {
page: 0,
animationsAreEnabled: true,
progress: {
position: 0,
offset: 0,
},
};
},
onPageSelected: function(e) {//当页面选中的时候
this.setState({page: e.nativeEvent.position});
},
//滑动
onPageScroll: function(e) {
this.setState({progress: e.nativeEvent});
},
//移动到某一页
move: function(delta) {
var page = this.state.page + delta;
this.go(page);
},
//跳到某一页
go: function(page) {
if (this.state.animationsAreEnabled) {
this.viewPager.setPage(page);
} else {
this.viewPager.setPageWithoutAnimation(page);
}
this.setState({page});
},
//根据页数加载界面
render: function() {
var pages = [];
for (var i = 0; i < PAGES; i++) {
var pageStyle = {
backgroundColor: BGCOLOR[i % BGCOLOR.length],
alignItems: 'center',
justifyContent : 'center',
};
if(i === 0){
pages.push(
<View key={i} style={pageStyle} collapsable={false}>
<FirstPage />
</View>
);
}else if(i === 1){
pages.push(
<View key={i} style={pageStyle} collapsable={false}>
<SecondPage />
</View>
);
}
else if(i === 2){
pages.push(
<View key={i} style={pageStyle} collapsable={false}>
<ThirdPage />
</View>
);
}else if(i === 3){
pages.push(
<View key={i} style={pageStyle} collapsable={false}>
<ForthPage />
</View>
);
}else if(i === 4){
pages.push(
<View key={i} style={pageStyle} collapsable={false}>
<FifthPage />
</View>
);
}
else{
pages.push(
<View key={i} style={pageStyle} collapsable={false}>
</View>
);
}
}
var { page, animationsAreEnabled } = this.state;

return (
<View style={styles.container} >
<NavBar
navigator={this.props.navigator}
title="关于"
renderScene={this.renderScene}
backFunc={()=>{this.props.navigator.pop()}}/>
<View style = { styles.vpContainer }>
<ViewPagerAndroid
style={styles.viewPager}
initialPage={0}
onPageScroll={this.onPageScroll}
onPageSelected={this.onPageSelected}
ref={viewPager => { this.viewPager = viewPager; }}>
{pages}
</ViewPagerAndroid>
</View>
<View style = { [styles.dotView1,{ opacity : page == 0 ? 1 : 0.4 }] } />
<View style = { [styles.dotView2 , { opacity : page == 1 ? 1 : 0.4 }] }/>
<View style = { [styles.dotView3, { opacity : page == 2 ? 1 : 0.4 }] } />
<View style = { [styles.dotView4, { opacity : page == 3 ? 1 : 0.4 }] } />
<View style = { [styles.dotView5, { opacity : page == 4 ? 1 : 0.4 }] } />
</View>
);
},
});

var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, nextState) {
return (
<TouchableOpacity style={{flex:1}}
onPress={() => navigator.parentNavigator.pop()}>
<View style = {styles.titleBackView} >
<Image source = {require('../imgs/icon_back.png')} style = {  styles.titleBackimg }/>
<Text style={ styles.titleBackText }>
返回
</Text>
</View>
</TouchableOpacity>
);
},
RightButton(route, navigator, index, nextState) {
return (
<View/>
);
},
Title(route, navigator, index, nextState) {
return (
<View style = { styles.titleCenterView } >
<Text style={ styles.titleCenterText } >
关于
</Text>
</View>
);
}
};

//dotview小圆点，用于表示滑动到哪一页圆点
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
vpContainer: {
flex: 9,
},
viewPager: {
flex: 1,
},
dotView1: {
position : 'absolute' ,
width : deviceWidth/30 ,
height : deviceWidth/30,
borderRadius: deviceWidth/60,
top : deviceHeight-deviceHeight/8,
right : deviceWidth / 2 + 2*deviceWidth/15 ,
backgroundColor : 'gray' ,
opacity : 0.4 ,
flexDirection : 'column',
},
dotView2: {
position : 'absolute' ,
width : deviceWidth/30 ,
height : deviceWidth/30,
top : deviceHeight-deviceHeight/8 ,
right : deviceWidth / 2 + deviceWidth/15 ,
backgroundColor : 'gray' ,
borderRadius: deviceWidth/60,
opacity : 0.4 ,
flexDirection : 'column',
},
dotView3: {
position : 'absolute' ,
width : deviceWidth/30 ,
height : deviceWidth/30,
top : deviceHeight-deviceHeight/8,
right : deviceWidth / 2 ,
backgroundColor : 'gray' ,
borderRadius: deviceWidth/60,
opacity : 0.4 ,
flexDirection : 'column',
},
dotView4: {
position : 'absolute' ,
width : deviceWidth/30 ,
height : deviceWidth/30,
borderRadius: deviceWidth/60,
top : deviceHeight-deviceHeight/8,
right : deviceWidth / 2 - deviceWidth/15 ,
opacity : 0.4 ,
backgroundColor : 'gray' ,
flexDirection : 'column',
},
dotView5: {
position : 'absolute' ,
width : deviceWidth/30 ,
height : deviceWidth/30,
borderRadius: deviceWidth/60,
top : deviceHeight-deviceHeight/8,
right : deviceWidth / 2 - 2*deviceWidth/15 ,
opacity : 0.4 ,
backgroundColor : 'gray' ,
flexDirection : 'column',
},
dotImg : {
flex : 1 ,
},
titleBackView : {
flex : 1 ,
flexDirection : 'row',
justifyContent: 'center',
alignItems : 'center',

},
titleBackimg : {
flex:1,
resizeMode : 'contain',
height: 40,
width: 40,
marginTop : deviceHeight/60,
},
titleBackText : {
color: '#53CEFF' ,
fontSize : deviceHeight/50,
marginTop : deviceHeight/60,
},
titleCenter : {
flex: 5,
height:70,
width: 0 ,
alignItems: 'center',
},
titleCenterText :{
color: 'black',
fontSize: deviceHeight/30,
alignSelf : 'center',
textAlign : 'center',
},
titleCenterView : {
flexDirection : 'row',
justifyContent: 'center',
alignItems : 'center',
position : 'absolute',
right: deviceWidth / 2 - deviceHeight/30/2,
top : 0,
backgroundColor : 'green',
},
});

module.exports = ViewPagerAndroidExample;