ScrollView

- 這是一個是一個可滾動的容器，能夠再其中放入多個組件和視圖，不只能夠豎直滾動，也能夠水平滾動

- 如今經過一個輪播圖來初步瞭解一下他的屬性和方法，項目的github地址：https://github.com/Yangyifan584921/ScrollViewDemo，記得點星星哦

export default class reactDemo extends React.Component{
    constructor(props){
        super(props);
        this.state={
            currentIndex:0,
            imgDate:[
                "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1586207542,1126066039&fm=27&gp=0.jpg",
                "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=382424164,2265057143&fm=27&gp=0.jpg",
                "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1474506808,2225489807&fm=27&gp=0.jpg",
                "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1820830892,319341373&fm=27&gp=0.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();
    }
    
    doClick(index){
        clearInterval(this.carouselTimer);
        this.setState({currentIndex:index},()=>{
            let 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(){
        let 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((ele,index)=>{
            return(
                <Image key={index} style={{width:screenWidth,height:240}} source={{url:ele}}></Image>
            )
        });
        const doList=imgDate.map((ele,index)=>{
            return(
                <Text onPress={this.doClick.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={true}
                    pagingEnabled={true}
                    onScrollBeginDrag={this.dragStart}
                    onScrollEndDrag={this.dragEnd}
                    onMomentumScrollEnd={this.onAnnotationEnd}
                >
                    {imgDataList}
                </ScrollView>
                <View style={styles.dotView}>{doList}</View>
            </View>
            )
    }
}

 

> 經常使用方法：
> - onMomentumScrollBegin:函數->當視圖滾動時
> - onMomentumScrollEnd:函數->當視圖中止滾動時

> 經常使用屬性：

屬性	做用
showsHorizontalScrollIndicator	控制是否顯示水平方向的滾動條
showsVerticalScrollIndicator	控制是否顯示垂直方向的滾動條
scrollEnabled	控制控件是否能滾動
contentOffSet	監控目前滾動的位置
bounces	控制控件遇到邊框是否反彈
pagingEnabled	控制控件是否整頁翻動
horizontal	爲true時水平滾動，爲false時數值滾動