React Native 之ScrollView轮播图实现方法实例

1.index.And ROI d.js

import React, {  component  }  From  & # 39;react';  
import {  
  Ap PR egistry,  
  StyleSheet,  
  TextInput,  
  TouchableOpac IT y,  
  ScrollView,  
  Text,  
  View  
} f rom  'react-native';  
  
import ScrollViewDemo from "./scrollViewDemo";  
import ScrollViewTop from "./scrollViewTop";  
import PositionDemo from "./positionDemo";  
  
 export  default class C QQ Lo gin Demo extends Component {  
    
  render() {  
    return (  
    <ScrollViewTop/>  
    );  
  }  
  
}  
AppRegistry.registerComponent('CQQ LOG inDemo', () => CQQLoginDemo);

2.在项目的 index.android.js同一目录下 创建 json文件 这样方便图片的访问，资 源 图片放在项目名称\android\app\src\m ai n\res\drawable 下面

这里的BadgeData. JSON 如下：

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

3.主要的文件 scrollViewTop.js 文件 如下 具体注释中已写 直接上代码：

/** 
 * S am ple 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 ScreenH ei ght = Dimensions.get('window').height;  
  
import ImageData from "./BadgeData.json";   
  
e xp ort  default class scrollViewTop extends Component {  
    
  constructor(props) {  
    su PE r(props);  
    this. stat e = {  current Page: 0 };  
  }  
  
  static defaultProps = {  
    duration: 1000,  
  }  
  
  componentDid mount () {  
    this._startTimer();  
  
  }  
  
  componentWillUnmount() {  
    // 如果存在this.timer，则使用clearTimeout清空。  
    // 如果你使用多个timer，那么用多个变量， 或者 用个数组来保存引用，然后逐个clear      this.timer  &&  clearTimeout(this.timer);  
  }  
  
  render() {  
    return (  
      <View style={styles.continer}>  
        <ScrollView  
          ref='scrollView'  
          //水 平方 向            horizontal={true}  
          //当值为true时显示滚动条            showsHorizontalScrollIndicator={false}  
          //当值为true时，滚动条会停在滚动视图的 尺寸 的整数倍位置。这个可以用在水平分页上            pagingEnabled={true}  
          //滑动完一贞            onMomentumScrollEnd={(e)=>{this._onAnimationEnd(e)}}  
          // 开始 拖拽            onScrollBegin Drag ={()=>{this._onScrollBeginDrag()}}  
          //结束拖拽            onScrollEndDrag={()=>{this._onScrollEndDrag()}}  
          >  
          {this._renderAllImage()}  
        </ScrollView>  
        <View style={styles.pageViewStyle}>  
         {this._renderAllIndicator()}  
        </View>  
      </View>  
    );  
  }  
  /**开始拖拽 */  
  _onScrollBeginDrag(){  
    console.log("开始拖拽");  
    //两种清除方式 都是可以的没 有区别   
    // this.timer &am p; & clearInterval(this.timer);      this.timer && clearTimeout(this.timer);  
  }  
  /**停止拖拽 */  
  _onScrollEndDrag(){  
    console.log("停止拖拽");  
    this.timer &&this._startTimer();  
  }  
  
  /**1.轮播图片展示 */  
  _renderAllImage() {  
    let allImage = [];  
    let  img sArr = 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:'orange'}:{color:'white'};  
      indicatorArr.push(  
        <Text key={i} style={[{font Size: 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,ani MATE d: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 ',  
  }  
});

以上就是React Native 之ScrollView轮播图实现方法实例的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 React Native 之ScrollView轮播图实现方法实例 全部内容，希望文章能够帮你解决 React Native 之ScrollView轮播图实现方法实例 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于React Native 之ScrollView轮播图实现方法实例的详细内容...