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,
    40,
   marginTop : deviceHeight/60,
  },
  titleBackText : {
    color: '#53CEFF' , 
    fontSize : deviceHeight/50,
    marginTop : deviceHeight/60,
  },
  titleCenter : {
      flex: 5,
      height:70,
       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;