本文介紹RN如何實(shí)現(xiàn)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'}}>滾動(dòng)</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}>滾動(dòng)</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是滾動(dòng)結(jié)束后調(diào)用的函數(shù)，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我開始用的上面那套注釋掉的愚蠢的方法去渲染袱贮，發(fā)現(xiàn)渲染出來的Image很模糊，我也不知道是什么原因（高手路過還請(qǐng)指點(diǎn)一二）体啰。
<TouchableOpacity style={styles.buttonStyle} disabled={this.state.useAble} ref={(button)=>this.getButton=button} onPress={()=>{this.getSource()}}>
<Text style={styles.textStyle}>獲取</Text>
</TouchableOpacity>
這里的按鈕是用來獲取圖片資源以及開啟定時(shí)器的地方攒巍。
下面貼上調(diào)用的函數(shù)
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函數(shù)是在ScrollView滾動(dòng)停止后用來獲取當(dāng)前偏移量的方法。
getSource當(dāng)然是用來獲取資源的方法荒勇。fetch默認(rèn)使用GET請(qǐng)求柒莉，因?yàn)檫@里只是取數(shù)據(jù)，所以使用了默認(rèn)方法沽翔，至于如何設(shè)置請(qǐng)求頭和請(qǐng)求體這里也不做說明兢孝，response.json返回的數(shù)據(jù)為json。
this.setState({frame_width:responseJson.comments.length*width, useAble:true, imageUrl:imageContent});
這里同時(shí)更新了frame_width仅偎、imageUrl這兩個(gè)狀態(tài)跨蟹，frame_width就是前面提到的動(dòng)態(tài)修改View的style，imageUrl提供圖片資源橘沥。
this._after = setTimeout(() => {
this._time = setInterval(() => {
this._index ++;
console.log(this._index);
{this.onPressAction()};
},5000);
}, 5000);
這里的兩個(gè)定時(shí)器窗轩，外面的定時(shí)器是獲取到資源后延時(shí)5s調(diào)用里面的循環(huán)定時(shí)器，間隔5s座咆。
onPressAction就是實(shí)現(xiàn)圖片滾動(dòng)效果的方法痢艺。當(dāng)圖片滾動(dòng)到最后一張的時(shí)候，下一次滾動(dòng)跳轉(zhuǎn)至第一張介陶。
剛看RN兩周腹备，自己寫的代碼質(zhì)量不高，大佬路過還望指點(diǎn)一二斤蔓。??
