浅谈react native中的ScrollView_react-native horizontalscrollview-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38453189/article/details/71434563

本文介绍如何使用ScrollView组件创建轮播图效果。ScrollView是React Native中的一个可滚动容器，支持水平和垂直滚动。文中提供了完整的代码示例，展示如何通过ScrollView的属性控制轮播图的显示，并实现自动切换图片的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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通用属性。更多详细属性请移步到此处

3、基于ScrollView的轮播图demo实例

全部demo代码：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    Dimensions
} from 'react-native';

export default class reactdemo02 extends Component {
    constructor(props){
        super(props);
        this.state={
            //当前显示的图片索引
            currentIndex:0,
            //在线图片数据
            imgDate:[
                "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=1494232883125&di=c8234065f7872532308c5396e0fcd3b8&imgtype=0&src=http%3A%2F%2Fimg1.91.com%2Fuploads%2Fallimg%2F130514%2F32-1305141I359.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",
                "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"
            ]
        };
        this.carousel = this.carousel.bind(this);
        this.dragStart = this.dragStart.bind(this);
        this.dragEnd = this.dragEnd.bind(this);
        this.onAnnotationEnd = this.onAnnotationEnd.bind(this)
    }
    componentDidMount(){
        this.carousel()
    }

    //点击圆点，关闭定时器，并设置当前图片索引
    dotClick(index){
        clearInterval(this.carouselTimer);
        this.setState({
            currentIndex:index
        },()=>{
            var ScrollView = this.refs.scrollView;
            const currentX = this.state.currentIndex*Dimensions.get('window').width;
            ScrollView.scrollResponderScrollTo({x:currentX,animated:true})
        })
    }

    //开始拖动，关闭定时器
    dragStart(){
        clearInterval(this.carouselTimer);
    }

    //拖动结束，开启定时器
    dragEnd(){
        this.carousel()
    }

    //定时器
    carousel(){
        var ScrollView = this.refs.scrollView;
        const timer = 4000;
        let currentIndex = this.state.currentIndex;

        this.carouselTimer = setInterval(()=>{
            currentIndex===this.state.imgDate.length-1?currentIndex=0:currentIndex++
            this.setState({
                currentIndex:currentIndex
            },()=>{
                const currentX = currentIndex*Dimensions.get('window').width;
                ScrollView.scrollResponderScrollTo({x:currentX,animated:true})
            })
        },timer)

    }

    //当一帧滚动完毕时，重新设置当前图片的索引
    onAnnotationEnd(e){
        const offSetX = e.nativeEvent.contentOffset.x;
        const currentIndex = offSetX/Dimensions.get('window').width;
        this.setState({
            currentIndex:currentIndex
        })
    }
    render() {
        const { imgDate, currentIndex } = this.state;
        const screenWidth = Dimensions.get('window').width;
        const imgDataList = imgDate.map((elem,index)=>{
            return(
                <Image key={index} style={{width:screenWidth,height:240}} source={{uri:elem}} />
            )
        });
      const dotList = imgDate.map((elem,index)=>{
          return (
                <Text onPress={this.dotClick.bind(this,index)} key={index} style={[styles.dotStyle,{backgroundColor:currentIndex===index?"red":"#fff"}]}></Text>
          )
      })
    return (
      <View>
          <Text style={styles.myTitleStyle}>ScrollView轮播图</Text>
         <ScrollView
             ref="scrollView"
             horizontal={true}
             showsHorizontalScrollIndicator={false}
             pagingEnabled={true}
             onScrollBeginDrag={this.dragStart}
             onScrollEndDrag={this.dragEnd}
             onMomentumScrollEnd={this.onAnnotationEnd}
         >
             {imgDataList}
         </ScrollView>
         <View style={styles.dotView}>{dotList}</View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    myTitleStyle:{
        flexDirection:'row',
        fontSize:30,
        color:'#000',
        textAlign:'center',
        paddingTop:12,
        paddingBottom:12,
        marginTop:24,
        marginBottom:24
    },
    dotStyle:{
        width:24,
        height:24,
        borderRadius:12,
        marginRight:10,
    },
    dotView:{
        flexDirection:'row',
        marginLeft:15,
        position:'absolute',
        bottom:10
    }
});

AppRegistry.registerComponent('reactdemo02', () => reactdemo02);