这篇文章主要介绍了React Native之如何实现ScrollView轮播图，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
元宝网站建设公司创新互联公司,元宝网站设计制作，有大型网站制作公司丰富经验。已为元宝上千多家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的元宝做网站的公司定做！
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 (
2.在项目的 index.android.js同一目录下 创建json文件 这样方便图片的访问，资源图片放在项目名称\android\app\src\main\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 文件 如下 具体注释中已写 直接上代码：
/**
* 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 (
{this._onAnimationEnd(e)}}
//开始拖拽 onScrollBeginDrag={()=>{this._onScrollBeginDrag()}}
//结束拖拽 onScrollEndDrag={()=>{this._onScrollEndDrag()}}
>
{this._renderAllImage()}
{this._renderAllIndicator()}
);
}
/**开始拖拽 */
_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(
•
);
}
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',
}
});
感谢你能够认真阅读完这篇文章，希望小编分享React Native之如何实现ScrollView轮播图内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!
