react-native-swiper第三方组件的使用较为简单,提供源码仅供学习参考
代码中数据请求成功前展示<view>
静态视图,数据请求成功动态赋值并刷新轮播图展示,并已处理点击跳转详情页的逻辑。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
TouchableOpacity,
ViewPagerAndroid,
Navigator,
View,
NativeModules,
InteractionManager,
} from 'react-native';
import Swiper from 'react-native-swiper';
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
var Push = NativeModules.PushNative;
var Util = require('../Common/Util');
class HomeBanner extends Component {
constructor(props) {
super(props);
this.state = {
dataSource:null
};
}
render() {
return (
<View>
{
this.state.dataSource == null ?
<View style={styles.slide}>
</View>
:
<Swiper style={styles.wrapper} showsButtons={false} autoplay={true}>
{this.renderSwiper()}
</Swiper>
}
</View>
);
}
// 渲染
renderSwiper(){
var itemArr = [];
for (var i = 0; i < this.state.dataSource.length; i++) {
let data = this.state.dataSource[i];
itemArr.push(
<View style={styles.slide} key={i}>
<TouchableOpacity onPress={()=>this.pushNative('HomeBanner+'+data.link)}>
<Image source={{uri:data.img_url}} style={styles.topImageStyle} />
</TouchableOpacity>
</View>
);
}
return itemArr;
}
// 跳转原生应用
pushNative(link){
InteractionManager.runAfterInteractions(()=> {
// RNOpenOneVC这个也是写在原生里面的再PushNative中
Push.RNOpenOneVC(link);
})
}
componentWillMount(){
this.getBannerData();
}
getBannerData(){
let Url = Server+ActivityUrl;
this.GetNormal(Url,{'pageindex':'1','pagesize':'5'});
}
GetNormal(url,params){
if (params) {
let paramsArray = [];
//拼接参数
Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
if (url.search(/\?/) === -1) {
url += '?' + paramsArray.join('&')
} else {
url += '&' + paramsArray.join('&')
}
}
//fetch请求
fetch(url,{
method: 'GET',
})
.then((response) => response.json())
.then((json) => {
console.log('json'+JSON.stringify(json));
this.setState({
dataSource: json.data
})
})
.catch((error) => {
//alert(error)
})
}
}
const styles = StyleSheet.create({
wrapper: {
height:140,
},
slide: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB',
},
topImageStyle: {
width:width,
height:140
},
});
module.exports = HomeBanner;