react Native从入门到深入一 ScrollerView

上一遍简单的把ScrollerView的一些属性简单的总结了一下，今天做一个小的Demo,巩固一些知识。众所周知，轮播现在在移动端的开发工程中是特别常见的，几乎现在所以的应用都有轮播效果。今天就简单的实现一个小的轮播demo，这些知识比较适合入门的小白学习，大神勿喷，喜欢就看看。

一。准备工作

在实现一个功能的实现一个功能的时候，我们自己前期需要明白，这个功能需要什么样的组件，需要运用到那些只是，实现什么样的效果。

实现自动轮播的组件：

View Image  Scorller  还有一个重要的定时器Timer。

1.1 定时器Timer的介绍

定时器的设置和销毁的方法和区别：

setTimeout, clearTimeout  是在每帧刷新之后执行一次

setInterval, clearInterval   稍后执行

setImmediate, clearImmediate 在当前JavaScript执行块结束的时候执行，在将要发送批量响应数据到原生之前。

requestAnimationFrame, cancelAnimationFrame  尽快的执行

1.2 TimerMixin

1.2.1 TimerMixin 安装

npm i react-timer-mixin --save

1.2.1TimerMixin 引用

在创建类之前引入

var  TimerMixin =require('react-timer-mixin');

1.2.2  注册 TimerMixin 

注意：Mixin属于ES5语法，对于ES6代码来说，无法直接使用Mixin。如果你的项目是用ES6代码编写，同时又使用了计时器，那么你只需铭记在unmount组件时清除（clearTimeout/clearInterval）所有用到的定时器，那么也可以实现和TimerMixin同样的效果。

二。实现步骤及原理

2.1实例化各个组件，设置属性。

2.2通过scroller的方法，设置滚动拖拽方向，根据上下文求出偏移量

e.nativeEvent.contentOffset.x;

2.3 让scrollView根据偏移量进行滚动

var currentX = activePage * screenWidth;

scrollView.scrollResponderScrollTo({x:currentX, y:0, animated:true});

2.4详细代码截图：

运行结果：

完整Demo下载地址：https://github.com/nanaLxs/React--ScrollerView-demo