本文介绍RN如何实现banner的轮播效果。
下面直接贴代码
render () {
return (
<View style={styles.container}>
<ScrollView
ref={(scroll)=>this.ScrollView=scroll}
style={styles.scrollStyle}
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={true}
maximumZoomScale={2.0}
minimumZoomScale={0.5}
onMomentumScrollEnd={(e)=>{this.onAnimationEnd(e)}}
>
{/*this.renderImages()*/}
{/* {IMAGES.map(this.renderImages2)} */}
<View style={[styles.viewStyle, {width:this.state.frame_width}]}>
{/* <Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[0]}}>
</Image>
<Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[1]}}>
</Image>
<Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[2]}}>
</Image>
<Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[3]}}>
</Image> */}
{this.state.imageUrl.map(this.renderImages3)}
</View>
</ScrollView>
{/* <TouchableOpacity
onPress={()=>{this.onPressAction()}} disabled={this.state.useAble}>
<View ref={(button)=>this.ScrollButton=button} style={{height:40, backgroundColor:'red'}}>
<Text style={{padding:10, color:'white', fontSize:15, textAlign:'center'}}>滚动</Text>
</View>
</TouchableOpacity> */}
<View style = {{alignItems: 'center', justifyContent: 'center', flexDirection: 'row'}}>
<TouchableOpacity onPress={()=>{this.onPressAction()}} disabled='false'/*{this.state.useAble}*/ ref={(button)=>this.ScrollButton=button} style={styles.buttonStyle}>
<Text style={styles.textStyle}>滚动</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonStyle} disabled={this.state.useAble} ref={(button)=>this.getButton=button} onPress={()=>{this.getSource()}}>
<Text style={styles.textStyle}>获取</Text>
</TouchableOpacity>
</View>
</View>
);
}
ScrollView里面的一些属性就不一一介绍了，onMomentumScrollEnd是滚动结束后调用的函数，View的样式等一下再介绍。
{/* <Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[0]}}>
</Image>
<Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[1]}}>
</Image>
<Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[2]}}>
</Image>
<Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[3]}}>
</Image> */}
{this.state.imageUrl.map(this.renderImages3)}
这里面Image我开始用的上面那套注释掉的愚蠢的方法去渲染，发现渲染出来的Image很模糊，我也不知道是什么原因（高手路过还请指点一二）。
<TouchableOpacity style={styles.buttonStyle} disabled={this.state.useAble} ref={(button)=>this.getButton=button} onPress={()=>{this.getSource()}}>
<Text style={styles.textStyle}>获取</Text>
</TouchableOpacity>
这里的按钮是用来获取图片资源以及开启定时器的地方。
下面贴上调用的函数
onAnimationEnd(e) {
this.setState({useAble:false});
contentOffsetX = e.nativeEvent.contentOffset.x;
contentOffsetY = e.nativeEvent.contentOffset.y;
}
onPressAction() {
this.setState({useAble:true});
var x,y;
if (contentOffsetX == (this.state.imageUrl.length - 1)*width) {
this.ScrollView.scrollTo({x:0});
} else {
this.ScrollView.scrollTo({x:contentOffsetX+width});
}
}
getSource () {
// this.setState({useAble:true});
fetch("http://jandan.net/?oxwlxojflwblxbsapi=jandan.get_ooxx_comments&page=1",{
}).then((response) => response.json())
.then((responseJson) => {
this.setState({useAble:false});
// var imagesarray = responseJson.comments[0].pics;
var imageContent = [];
for (let i = 0; i < responseJson.comments.length; i++) {
imageContent.push(responseJson.comments[i].pics[0]);
}
console.log(imageContent);
this.setState({frame_width:responseJson.comments.length*width, useAble:true, imageUrl:imageContent});
// this.setState({imageUrl:imageContent})
this._after = setTimeout(() => {
this._time = setInterval(() => {
this._index ++;
console.log(this._index);
{this.onPressAction()};
},5000);
}, 5000);
})
.catch ((error) => {
console.log(error);
});
}
renderImages3 = (i) => {
return <Image key={i} source={{uri: i}} style={styles.itemStyle} />
}
}
onAnimationEnd函数是在ScrollView滚动停止后用来获取当前偏移量的方法。
getSource当然是用来获取资源的方法。fetch默认使用GET请求，因为这里只是取数据，所以使用了默认方法，至于如何设置请求头和请求体这里也不做说明，response.json返回的数据为json。
this.setState({frame_width:responseJson.comments.length*width, useAble:true, imageUrl:imageContent});
这里同时更新了frame_width、imageUrl这两个状态，frame_width就是前面提到的动态修改View的style，imageUrl提供图片资源。
this._after = setTimeout(() => {
this._time = setInterval(() => {
this._index ++;
console.log(this._index);
{this.onPressAction()};
},5000);
}, 5000);
这里的两个定时器，外面的定时器是获取到资源后延时5s调用里面的循环定时器，间隔5s。
onPressAction就是实现图片滚动效果的方法。当图片滚动到最后一张的时候，下一次滚动跳转至第一张。
刚看RN两周，自己写的代码质量不高，大佬路过还望指点一二。😁
