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;