ReactNative——UI3.ScrollView 实现轮播图效果

这里简单介绍 ScrollView 的使用及基本属性，结合组件的生命周期 使用ScrollView 实现自动轮播效果。

基本使用效果图：

代码：

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, {Component} from 'react';import {    AppRegistry, ScrollView,    StyleSheet,    Text,    View} from 'react-native';var {width, height} = require('Dimensions').get('window');export default class Day0808 extends Component {    render() {        return (            <View style={styles.container}>                <ScrollView                    //是否展示水平指示器                    showsHorizontalScrollIndicator={false}                    //滚动条是否停在滚动视图的尺寸的整数倍位置                    pagingEnabled={true}                    //ScrollView 的滑动方向                    horizontal={true}>                    {this.rendBody()}                </ScrollView>            </View>        );    }    rendBody() {        //数组        var allChild = [];        var colors = ['red', 'green', 'blue', 'yellow', 'purple'];        for (let i = 0; i < colors.length; i++) {            allChild.push(                <View key={i} style={{backgroundColor: colors[i], width: width, height: height / 4}}>                    <Text>{i}</Text>                </View>            )        }        return allChild;    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#F5FCFF',    },});AppRegistry.registerComponent('Day0808', () => Day0808);

使用ScrollView 实现轮播图效果：

实现步骤：

 1.在ScrollView 中填充Image。

 2.给ScrollView 添加下面的轮播指示器。

 3.使用setInterval() 自动轮播效果。

 4. 添加事件 当手拖拽时 取消自动轮播，当手停止拖拽时 继续自动轮播。

数据源：

{  "data":[    {      "img":"img_1",      "title":"冰肌玉骨 婀娜多姿"    },    {      "img":"img_2",      "title":"秀色可餐 貌美如花"    },    {      "img":"img_3",      "title":"闭月羞花 国色天香"    },    {      "img":"img_4",      "title":"倾国倾城 亭亭玉立"    },    {      "img":"img_5",      "title":"明眸皓齿 窈窕淑女"    },    {      "img":"img_6",      "title":"天生丽质 小家碧玉"    }  ]}

完整代码：

import React, {Component} from 'react';import {    AppRegistry,    Image,    ScrollView,    StyleSheet,    Text,    View} from 'react-native';import ImageData from './data/imageData.json';var {width, height} = require('Dimensions').get('window');//引入计时器类库export default class ScrollPagerView extends Component {    constructor(props) {        super(props);        this.state = {            //当前页码            currentPage: 0,        }    }    static defaultProps = {        duration: 3000    }    componentDidMount() {        //开启定时器       this.startTimer();    }    componentWillUnmount() {        this.timer && clearTimeout(this.timer);    }    //注册    render() {        return (            <View style={styles.container}>                <ScrollView                    ref='scrollView'                    //是否展示水平指示器                    showsHorizontalScrollIndicator={false}                    //滚动条是否停在滚动视图的尺寸的整数倍位置                    pagingEnabled={true}                    //ScrollView 的滑动方向                    horizontal={true}                    //手拖拽时 停止计时器                    //滑动完一贞                    onMomentumScrollEnd={(e)=>{this._onAnimationEnd(e)}}                    //开始拖拽                    onScrollBeginDrag={()=>{this._onScrollBeginDrag()}}                    //结束拖拽                    onScrollEndDrag={()=>{this._onScrollEndDrag()}}                   >                    {this.rendImage()}                </ScrollView>                {/*指示器*/}                <View style={styles.pagerViewStyle}>                 {/*   返回圆点*/}                    {this.renderPagerCircle()}                </View>            </View>        );    }    //开始拖拽    _onScrollBeginDrag() {        //停止定时器        this.timer && clearTimeout(this.timer);    }    //停止拖拽,开启定时器    _onScrollEndDrag() {        this.startTimer();    }    //一页切换结束时执行    _onAnimationEnd(e) {        //计算水平偏移量        let offSetX = e.nativeEvent.contentOffset.x;        console.log(offSetX);        //根据偏移量 求出当前页        var currentPage = Math.floor(offSetX / width);        console.log(offSetX);        //更新 状态机        this.setState({            currentPage: currentPage,        });    }    //返回圆点    renderPagerCircle() {        let indicatorArr = [];        let imgsArr = ImageData.data;        let style;        //遍历        for (let i = 0; i < imgsArr.length; i++) {            style = (i == this.state.currentPage) ? {color: 'orange'} : {color: '#ffffff'}            indicatorArr.push(                <Text key={i} style={[{fontSize: 25}, style]}>•</Text>            )        }        return indicatorArr;    }    //返回所有图片    rendImage() {        //数组        let allImage = [];        //数据        let imgsArr = ImageData.data;        //遍历        for (let i = 0; i < imgsArr.length; i++) {            let imgItem = imgsArr[i];            allImage.push(                <Image key={i} source={{uri: imgItem.img}} style={{width: width, height: width * 1080 / 1920}}/>            )        }        return allImage;    }    //开启定时器    startTimer() {        //拿到scrollview        let scrollView = this.refs.scrollView;        let imgCount = ImageData.data.length;        //添加定时器        // selfThis = this;        this.timer = setInterval(() => {            let activePage = 0;            if ((this.state.currentPage + 1 >= imgCount)) {                activePage = 0;                //  this.timer && clearInterval(this.timer);            } else {                activePage = this.state.currentPage + 1;            }            //更新状态机            this.setState({                currentPage: activePage            });            //让scrollView 滚动            var currentX = activePage * width;            //  scrollView.scrollTo({x:currentX, y:0, animated:true})            scrollView.scrollResponderScrollTo({x:currentX, y:0, animated:true});        }, this.props.duration);    }}const styles = StyleSheet.create({    container: {        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#F5FCFF',    },    pagerViewStyle: {        width: width,        height: 25,        backgroundColor: 'rgba(0,0,0,0.4)',        position: 'absolute',        bottom: 0,        //主轴方向        flexDirection: 'row',        alignItems: 'center',    },});

Demo下载

不论大神还是新手，欢迎加QQ群一起讨论问题学习技术：230274309

参考资料 ： ScrollView中常用的属性 https://mp.weixin.qq.com/s/cO-ASOSuokWNsaBRlp9vuA