react-native学习笔记 ScrollView

ScrollView是一个非常基础的控件，作用与重要性也不多少废话了
http://reactnative.cn/docs/0.31/scrollview.html#content 为RN中文网的详细地址大家可以可以查看详细的API，不过RN官方文档的例子都一般特别蛋疼，在附上一些基础的例子，能方便像我这样的菜鸟明白其中的作用

先看一下演示效果

111.gif

//获取屏幕尺寸
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');

class EScrollViewDemo extends Component {
  render() {
    return (
       
         {this.renderChildView()} 
       
    );
  }
  
  renderChildView(){
     // 数组
     var allChild = [];
     var colors = ['red', 'green', 'blue', 'yellow', 'purple'];
     // 遍历
    for(var i=0; i<5; i++){
      allChild.push(
        //  循环排列的view中必须有唯一表示
          
             {colors[i]}
          
      );
    }
    // 返回数组，不然怎么显示出来
    return allChild;
  }
}

记得要引入ScrollView呦，不然就GG了

以下例子适用于iOS，因为部分功能不适用Android ，如果是Android 有专门的ViewPagerAndroid控件，这个虽然有点蛋蛋的忧伤，但是相信不久的将来RN会弥补上这些缺陷的

// 获取屏幕宽高
var Dimensions = require('Dimensions');
var{width,height}=Dimensions.get('window');
// 获取json数据，真实场景中可以获取网络数据
var ImageData = require('./ImageData.json');
class imageLunBo extends Component {

  // ES6写法，初始化变量
   constructor(props){
        super(props);
        this.state = {
           //
           currentPage :0
        };
    }

    componentDidMount(){
    // 屏幕加载完毕后调用定时器
    this.startTimer();
    }

  render() {
    return (
      
       this.onAnimationEnd(e)}
       >
        {this.renderAllImage()}
       
      
       {this.renderPageCircle()}
      

      
    );
  }
  onScrollBeginDrag(){
    console.log('开始触摸');

  }
  onScrollEndDrag(){
     console.log('结束触摸');

  }
  onAnimationEnd(e){
    // 获取滑动的偏移量
   var offSetX = e.nativeEvent.contentOffset.x;
    // 通过偏移量和屏幕宽度计算第几页
   var currentPage = Math.floor(offSetX/width);
  //  更新值已获取屏幕更新
   this.setState({
     currentPage:currentPage
  });
  }
  
   renderAllImage(){
    //  将图片放入数组
     var allImage = [];
     var ImagsArr = ImageData.data;
     for(var i=0; i
        );
     }
     return allImage;
   }

   renderPageCircle(){
     var allCircle=[];
     var style;
     var ImagsArr = ImageData.data;
     for (var index = 0; index < ImagsArr.length; index++) {

        style = (index==this.state.currentPage) ? {color:'orange'} :{color:'white'}

         allCircle.push(
          //  • 为圆点
           •
         );
       
     }
     return allCircle;
   }

  //  定时器函数
   startTimer(){
     //拿到ScrollView控件
   var ScrollView = this.refs.ScrollView;
  //  图片的资源的个数
   var Imagscount = ImageData.data.length;
  

 this.timer = setInterval(() => {
    // 获取当前为第几页
   var currentPage = this.state.currentPage;
  //  下一页的页数
    var activePage=0;
    // 如果下一页为尾页，将下一页设为首页
    if((currentPage+1) >= Imagscount){
      activePage = 0;
    }else{
      activePage = currentPage+1;
    }
    
    // 将值设置回去以便出发Diff算法，最终出发render函数   以便重新刷新页面
    this.setState({
     currentPage:activePage
  });

  // 通过页数计算应该展示什么位置的图案
  var offsetX = activePage * width;
   ScrollView.scrollResponderScrollTo({x:offsetX, y:0, animated:true});
  },this.props.duration);

 }

   componentWillUnmount() {  
    // 如果存在this.timer，则使用clearTimeout清空。  
    // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear  
    this.timer && clearTimeout(this.timer);  
  } 
}


// imageLunBo.propTypes={
// //属性校验期，表示改属性必须是bool，否则报错
// duration:React.PropTypes.bool
// };


// ES6中设置默认值的写法
imageLunBo.defaultProps={//设置默认属性
   duration:1000
};