基于ReactNative的广告页面组件,可直接引入使用。引入方式
var AdvertisingView = require('./AdvertisingView');
render() {
return (
<View> <AdvertisingView /> </View> ); }
JsonData数据
{
"data": [ { "img" : "img_01","title" : "你那一笑倾国倾城" },{ "img" : "img_02","title" : "那里记录了最唯美的爱情故事" },{ "img" : "img_03","title" : "我怎么是一个剩女" },{ "img" : "img_04","title" : "生命中最后的四分钟" },{ "img" : "img_05","title" : "我们都需要治疗" } ] }
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */
import React,{ Component } from 'react';
import {
AppRegistry,StyleSheet,Text,View,ScrollView,Image
} from 'react-native';
//引入react-timer-mixin定时器
var TimeMiXin = require('react-timer-mixin');
var dimensions = require('Dimensions');
var {width} = dimensions.get('window');
var jsonData = require('./ImageData.json').data;
var AdvertisingView = React.createClass({
mixins:[TimeMiXin],getDefaultProps(){
return{
scrollTime:2000
}
},getInitialState(){
return {
currentPage:0,}
},render(){
return(
<View>
<ScrollView
ref = 'scrollView'
style = {{marginTop:64}}
//横向滚动
horizontal = {true}
//自动分页
pagingEnabled = {true}
//滑动时关闭键盘
keyboardDismissMode = 'on-drag'
//隐藏横向滚动条
showsHorizontalScrollIndicator = {false}
//回弹事件取消
alwaysBounceHorizontal = {false}
//回弹事件取消
bounces = {false}
//每一帧滑动结束的时候回调
onMomentumScrollEnd = {this.scrollEnd}
//开始拖拽时调用
onScrollBeginDrag = {this.beginDrag}
//停止托转时调用
onScrollEndDrag = {this.endDrag}>
{this.returnImageView()}
</ScrollView>
<View style={styles.navView}>
{this.returnNavPointView()}
</View>
</View>
);
},// render 方法执行完毕之后调用
componentDidMount(){
this.startTimeout();
},// 组件将要被卸载的时候调用
componentWillUnmount(){
// 如果存在this.timer,则使用clearTimeout清空。
// 如果你使用多个timer,那么用多个变量,或者用个数组来保存引用,然后逐个clear
this.timer && clearTimeout(this.timer);
},// 开启定时器
startTimeout(){
//获取scrollView
var scrollView = this.refs.scrollView;
//开启定时器
this.timer = setInterval(
() => {
var addPage = this.state.currentPage + 1;
addPage = addPage == jsonData.length ? 0 : addPage;
this.setState({
currentPage:addPage,});
// scrollView.scrollTo({x:addPage * width,y:0,animated:true});
scrollView.scrollResponderScrollTo({x:addPage * width,y:0,animated:true});
},this.props.scrollTime
);
},returnImageView(){
var returnViewArr = [];
for (var i = 0 ; i < jsonData.length ; i++){
var imgData = jsonData[i];
returnViewArr.push(
<Image key={i} source={{uri:imgData.img}} style={styles.LunBoImage}/>
);
}
return returnViewArr;
},returnNavPointView(){
var returnViewArr = [];
for (var i = 0 ; i < jsonData.length ; i ++){
if (this.state.currentPage == i){
returnViewArr.push(
<View key={i} style={styles.navCurrentPoint}></View>
);
}else{
returnViewArr.push(
<View key={i} style={styles.navPoint}></View>
);
}
}
return returnViewArr;
},// 滑动结束时候的回调
scrollEnd(event){
// 获取水平方向的偏移量
var offsetX = event.nativeEvent.contentOffset.x;
// 计算页数
var page = Math.floor(offsetX / width);
// 设置当前的page
this.setState({
currentPage:page
});
// 判断当前的page页,如果page页为第一个或者最后一个的话,需要进行额外操作
if (page == 0){
}else if(page == jsonData.length){
}
},// 当用户开始托转的时候定制定时器
beginDrag(event){
this.timer && clearTimeout(this.timer);
},// 当用户停止拖拽的时候调用
endDrag(event){
this.startTimeout();
}
});
const styles = StyleSheet.create({
LunBoImage:{
width:width,height:160
},navView:{
width:width,height:25,marginTop:-25,backgroundColor:'rgba(14,14,0.4)',flexDirection:'row',alignItems:'center'
},navPoint:{
width:10,height:10,backgroundColor:'white',borderRadius:5,marginLeft:8
},navCurrentPoint:{
width:10,backgroundColor:'#2f91f4',marginLeft:8
}
});
module.exports = AdvertisingView;