android scroolview图片轮播,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 (
);
}
}
AppRegistry.registerComponent('CQQLoginDemo', () => CQQLoginDemo);
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 (
ref='scrollView'
//水平方向 horizontal={true}
//当值为true时显示滚动条 showsHorizontalScrollIndicator={false}
//当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上 pagingEnabled={true}
//滑动完一贞 onMomentumScrollEnd={(e)=>{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 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(
•
);
}
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',
}
});
