react native ScrollView 自定义控件 Banner (广告滚动)

1、ScrollView介绍（官方解释）：

ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动（默认），还能水平滚动（通过horizontal属性来设置）。

2、ScrollView常用属性：

horizontal（布尔值）：当此属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。

showsHorizontalScrollIndicator（布尔值）：当此属性为true的时候，显示一个水平方向的滚动条。

showsVerticalScrollIndicator（布尔值）：与showsHorizontalScrollIndicator相对，当此属性为true的时候，显示一个垂直方向的滚动条。

OnMomentumScrollEnd（function）：当一帧滚动完毕的时候调用，e.nativeEvent.contentOffset，可以用来获取偏移量。

onScrollBeginDrag（function）：当开始手动拖拽的时候调用。

onScrollEndDrag（function）：当结束手动拖拽的时候调用。

onScroll（function）：在滚动的过程中，每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。

*注意：ScrollView是继承自View，所以View中所有的属性同样适用于ScrollView。在此只介绍几个常见的android和ios通用属性。更多详细属性请移步到此处

例子：纵向滑动

export default class App extends Component<{}> {

  render() {
      const screenWidth = Dimensions.get('window').width;
    return (
      <View style={styles.container}>
          <View>
              <Text
                  style={styles.welcome}
              >
                  头部
              </Text>
          </View>
        <ScrollView
            ref="scrollView"
            horizontal={false}
            showsHorizontalScrollIndicator={false}
            pagingEnabled={true}
           >
                <Text
                    style={styles.welcome}
                >
                    ScrollView 纵向滑动
                </Text>
                <Image source={{ uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494233305839&di=e1647289d1fcd778f64ddf3ccaf6fcfa&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006791532.jpg"}}
                       style={{width:screenWidth,height:240}}></Image>
                <Image source={{ uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236802350&di=72da30f79403ec28b124424f2c24a9f6&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2014%2Flxy%2F2014%2F09%2F16%2F8.jpg"}}
                       style={{width:screenWidth,height:240}}></Image>

                <Image source={{ uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236734637&di=bb81b0fa9b2040542a4a6f9fcc2d0359&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006753179.jpg"}}
                       style={{width:screenWidth,height:240}}></Image>


        </ScrollView>
      </View>
    );
  }
}

纵向滑动.png

例子：横向（自定义ScrollView）

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image
} from 'react-native';
var Dimensions = require('Dimensions');
var ScreenWidth=Dimensions.get('window').width;

class MyScrollViewTwo extends Component{

    renderChilds= () =>{
        var imgeList=['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494233305839&di=e1647289d1fcd778f64ddf3ccaf6fcfa&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006791532.jpg'
                      ,'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236802350&di=72da30f79403ec28b124424f2c24a9f6&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2014%2Flxy%2F2014%2F09%2F16%2F8.jpg'
                     ,'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236734637&di=bb81b0fa9b2040542a4a6f9fcc2d0359&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006753179.jpg'
        ];

        return imgeList.map((item,i)=>{
            return<Image  key ={`item${i}`} source={{uri:item}}
                          style={{width:ScreenWidth,height:240}}></Image>

        });

    }

    render(){
         return  <ScrollView
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                        pagingEnabled={true}
                    >
             {this.renderChilds()}
         </ScrollView>;

    }
}
module.exports = MyScrollViewTwo;

横向滑动.png

例子自定义Banner

/**
 * Created by Android on 2017/12/12.
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image
} from 'react-native';
var Dimensions = require('Dimensions');
var ScreenWidth=Dimensions.get('window').width;
var  imgeList=require('./jsons.json');

class Banner extends Component{
        constructor(props){
            super(props);
            this.state={
                currentPage:0
            };

        }

    // 渲染图片
    renderChilds= () =>{
        return imgeList.data.map((item,i)=>{
            return<Image  key ={`item${i}`} source={{uri:item.img}}
                          style={{width:ScreenWidth,height:240}}></Image>

        });

    }
    /**
     * 渲染圆
     */
    renderCircles=()=>{
        return imgeList.data.map((item ,i)=>{
            var style = {};
            //当前页面的的指示器，橘黄色
            if(i === this.state.currentPage){
                style = {color:'orange'};
            }
            return <Text key={`text${i}`} style={[styles.circleStyle,style]}>&bull;</Text>
        });

    }

    handleScroll = (e)=>{
        var x = e.nativeEvent.contentOffset.x;
        var currentPage = Math.floor(e.nativeEvent.contentOffset.x / ScreenWidth);
        this.setState({currentPage:currentPage});
        console.log("currentPage:"+currentPage);
    }

    //定时器
    startTimer = ()=>{
        this.timer = setInterval(()=>{
            //计算出要滚动到的页面索引，改变state
            var currentPage = ++this.state.currentPage == imgeList.data.length ? 0 : this.state.currentPage;
            this.setState({currentPage:currentPage});
            //计算滚动的距离
            var offsetX = currentPage * ScreenWidth;
            this.refs.scrollView.scrollTo({x:offsetX,y:0,animated:true});
            console.log(currentPage);
        },2000);
    }
    //开始滑动
    handleScrollBegin = ()=>{
        console.log("handleScrollBegin");
        clearInterval(this.timer);
    }

    handleScrollEnd = ()=>{
        console.log("handleScrollEnd");
        this.startTimer();
    }

    render(){
         return <View style={styles.flexDirection}>
             {/*
                return 后面不能回车
              */}
                <ScrollView
                    ref="scrollView"
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    pagingEnabled={true}
                    onMomentumScrollBegin={this.handleScroll}
                    onScrollBeginDrag={this.handleScrollBegin}
                    onScrollEndDrag={this.handleScrollEnd}
                 >
                    {this.renderChilds()}
                </ScrollView>
                <View style={styles.circleWrapperStyle}>
                    {this.renderCircles()}
                </View>
            </View>;


    }

    //定时器  生命周期
    componentDidMount = ()=>{
        this.startTimer();
    }
    //取消定时器
    componentWillUnmount =() => {
        clearInterval(this.timer);
    }
}



var styles =StyleSheet.create({
    container: {
        flexDirection:'column'
    },
    circleWrapperStyle:{
        flexDirection:'row',
        //absolute“绝对”定位，参照标准父容器
        //relative “相对”对位，相对于原来的位置
        position:'absolute',
        bottom:0,
        left:10
    },
    circleStyle:{
        fontSize:25,
        color:'#FFF'
    }
});
module.exports = Banner;

return 后面不能回车

banner.png

jsons.json

{
  "data": [
    {
      "img" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494233305839&di=e1647289d1fcd778f64ddf3ccaf6fcfa&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006791532.jpg",
      "title" : "你那一笑倾国倾城"
    },
    {
      "img" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236802350&di=72da30f79403ec28b124424f2c24a9f6&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2014%2Flxy%2F2014%2F09%2F16%2F8.jpg",
      "title" : "那里记录了最唯美的爱情故事"
    },
    {
      "img" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236734637&di=bb81b0fa9b2040542a4a6f9fcc2d0359&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006753179.jpg",
      "title" : "我怎么是一个剩女"
    }

  ]
}