import React, { Component } from 'react';    import {      AppRegistry,      StyleSheet,      TextInput,      TouchableOpacity,      ScrollView,      Text,      View    } from 'react-native';        import ScrollViewDemo from "./scrollViewDemo";    import ScrollViewTop from "./scrollViewTop";    import PositionDemo from "./positionDemo";        export default class CQQLoginDemo extends Component {            render() {        return (        <ScrollViewTop/>        );      }        }    AppRegistry.registerComponent('CQQLoginDemo', () => CQQLoginDemo);

{      "data":[        {          "icon" : "danjianbao",          "title" : "單肩包"        },        {          "icon" : "liantiaobao",          "title" : "鏈條包"        },        {          "icon" : "qianbao",          "title" : "錢包"        },        {          "icon" : "shoutibao",          "title" : "手提包"        },        {          "icon" : "shuangjianbao",          "title" : "雙肩包"        },        {          "icon" : "xiekuabao",          "title" : "斜挎包"        }      ]    }

/**    * Sample React Native App    *     * @flow    */        import React, { Component } from 'react';    import {      AppRegistry,      StyleSheet,      ScrollView,      Image,      Text,      View    } from 'react-native';        let Dimensions = require('Dimensions');    let ScreenWidth = Dimensions.get('window').width;    let ScreenHeight = Dimensions.get('window').height;        import ImageData from "./BadgeData.json";         export  default class scrollViewTop extends Component {            constructor(props) {        super(props);        this.state = { currentPage: 0 };      }          static defaultProps = {        duration: 1000,      }          componentDidMount() {        this._startTimer();          }          componentWillUnmount() {        // 如果存在this.timer，則使用clearTimeout清空。        // 如果你使用多個timer，那么用多個變量，或者用個數(shù)組來保存引用，然后逐個clear      this.timer && clearTimeout(this.timer);      }          render() {        return (          <View style={styles.continer}>            <ScrollView              ref='scrollView'              //水平方向            horizontal={true}              //當(dāng)值為true時顯示滾動條            showsHorizontalScrollIndicator={false}              //當(dāng)值為true時，滾動條會停在滾動視圖的尺寸的整數(shù)倍位置。這個可以用在水平分頁上            pagingEnabled={true}              //滑動完一貞            onMomentumScrollEnd={(e)=>{this._onAnimationEnd(e)}}              //開始拖拽            onScrollBeginDrag={()=>{this._onScrollBeginDrag()}}              //結(jié)束拖拽            onScrollEndDrag={()=>{this._onScrollEndDrag()}}              >              {this._renderAllImage()}            </ScrollView>            <View style={styles.pageViewStyle}>             {this._renderAllIndicator()}            </View>          </View>        );      }      /**開始拖拽 */      _onScrollBeginDrag(){        console.log("開始拖拽");        //兩種清除方式 都是可以的沒有區(qū)別        // this.timer && clearInterval(this.timer);      this.timer && clearTimeout(this.timer);      }      /**停止拖拽 */      _onScrollEndDrag(){        console.log("停止拖拽");        this.timer &&this._startTimer();      }          /**1.輪播圖片展示 */      _renderAllImage() {        let allImage = [];        let imgsArr = ImageData.data;        for (let i = 0; i < imgsArr.length; i++) {          let imgsItem = imgsArr[i];         allImage.push(            <Image key={i} source={{uri:imgsItem.icon}} style={styles.imageStyle} />          );        }        return allImage;      }            /**2.手動滑動分頁實(shí)現(xiàn) */      _onAnimationEnd(e) {        //求出偏移量      let offsetX = e.nativeEvent.contentOffset.x;        //求出當(dāng)前頁數(shù)      let pageIndex = Math.floor(offsetX / ScreenWidth);        //更改狀態(tài)機(jī)      this.setState({ currentPage: pageIndex });      }            /**3.頁面指針實(shí)現(xiàn) */        _renderAllIndicator() {        let indicatorArr = [];        let style;        let imgsArr = ImageData.data;        for (let i = 0; i < imgsArr.length; i++) {          //判斷        style = (i==this.state.currentPage)?{color:'orange'}:{color:'white'};          indicatorArr.push(            <Text key={i} style={[{fontSize:30},style]}>             ?            </Text>          );        }        return indicatorArr;      }          /**4.通過定時器實(shí)現(xiàn)自動播放輪播圖 */        _startTimer(){        let scrollView = this.refs.scrollView;        this.timer = setInterval(          ()=>{console.log('開啟定時器');            let imageCount = ImageData.data.length;           //4.1 設(shè)置圓點(diǎn)         let activePage = 0;           //4.2判斷         if(this.state.currentPage>=imageCount+1){             activePage = 0;           }else{             activePage = this.state.currentPage+1;           }           //4.3 更新狀態(tài)機(jī)         this.setState({currentPage:activePage});           //4.4 讓scrollview 滾動起來         let offsetX = activePage * ScreenWidth;           scrollView.scrollResponderScrollTo({x:offsetX,y:0,animated:true});          },           this.props.duration         );        }    }      const styles = StyleSheet.create({      continer:{        backgroundColor: '#dddddd'      },      imageStyle:{        height:400,        width:ScreenWidth      },      pageViewStyle:{        height:25,        width:ScreenWidth,        backgroundColor:'rgba(0,0,0,0.4)',        position:'absolute',        bottom:0,            flexDirection:'row',        alignItems:'center',      }    });