Exemple de méthode d'implémentation du graphique carrousel ScrollView dans React Native

1.index.Android.js

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

2. Créez un fichier json dans le même répertoire que index.android.js du projet. Cela facilitera l'accès aux images. et des images de ressources. Sous le nom du projet androidappsrcmainresdrawable

le BadgeData.json est ici le suivant :

{  
  "data":[  
    {  
      "icon" : "danjianbao",  
      "title" : "单肩包"  
    },  
    {  
      "icon" : "liantiaobao",  
      "title" : "链条包"  
    },  
    {  
      "icon" : "qianbao",  
      "title" : "钱包"  
    },  
    {  
      "icon" : "shoutibao",  
      "title" : "手提包"  
    },  
    {  
      "icon" : "shuangjianbao",  
      "title" : "双肩包"  
    },  
    {  
      "icon" : "xiekuabao",  
      "title" : "斜挎包"  
    }  
  ]  
}

3. Le fichier principal scrollViewTop.js est le suivant. suit. Les commentaires spécifiques ont été rédigés directement Code :

/** 
 * 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，那么用多个变量，或者用个数组来保存引用，然后逐个clear      this.timer && clearTimeout(this.timer);  
  }  
  
  render() {  
    return (  
      <View style={styles.continer}>  
        <ScrollView  
          ref=&#39;scrollView&#39;  
          //水平方向            horizontal={true}  
          //当值为true时显示滚动条            showsHorizontalScrollIndicator={false}  
          //当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上            pagingEnabled={true}  
          //滑动完一贞            onMomentumScrollEnd={(e)=>{this._onAnimationEnd(e)}}  
          //开始拖拽            onScrollBeginDrag={()=>{this._onScrollBeginDrag()}}  
          //结束拖拽            onScrollEndDrag={()=>{this._onScrollEndDrag()}}  
          >  
          {this._renderAllImage()}  
        </ScrollView>  
        <View style={styles.pageViewStyle}>  
         {this._renderAllIndicator()}  
        </View>  
      </View>  
    );  
  }  
  /**开始拖拽 */  
  _onScrollBeginDrag(){  
    console.log("开始拖拽");  
    //两种清除方式 都是可以的没有区别  
    // 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.手动滑动分页实现 */  
  _onAnimationEnd(e) {  
    //求出偏移量      let offsetX = e.nativeEvent.contentOffset.x;  
    //求出当前页数      let pageIndex = Math.floor(offsetX / ScreenWidth);  
    //更改状态机      this.setState({ currentPage: pageIndex });  
  }  
  
    /**3.页面指针实现 */  
    _renderAllIndicator() {  
    let indicatorArr = [];  
    let style;  
    let imgsArr = ImageData.data;  
    for (let i = 0; i < imgsArr.length; i++) {  
      //判断        style = (i==this.state.currentPage)?{color:&#39;orange&#39;}:{color:&#39;white&#39;};  
      indicatorArr.push(  
        <Text key={i} style={[{fontSize:30},style]}>  
         •  
        </Text>  
      );  
    }  
    return indicatorArr;  
  }  
  
  /**4.通过定时器实现自动播放轮播图 */  
    _startTimer(){  
    let scrollView = this.refs.scrollView;  
    this.timer = setInterval(  
      ()=>{console.log('开启定时器');   
       let imageCount = ImageData.data.length;  
       //4.1 设置圆点         let activePage = 0;  
       //4.2判断         if(this.state.currentPage>=imageCount+1){  
         activePage = 0;  
       }else{  
         activePage = this.state.currentPage+1;  
       }  
       //4.3 更新状态机         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',  
  }  
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!