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);

顯示效果如下（此處為單純圖片，動態效果請自己嘗試）