基于React Native构建的仿京东客户端二 - 实现轮播图

安装轮播插件：

myths-Mac:JdApp myth$ yarn add react-native-swiper

App.js文件完整的代码如下：

import React,{ Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import Header from './Header';
import HomePage from './home/HomePage';

export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Header/>
<HomePage/>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
},

});

HomePage.js文件完整的代码如下：

import React,
View,
Image,
Dimensions,
ScrollView,
ListView
} from 'react-native';
import Swiper from 'react-native-swiper';
const {width} = Dimensions.get('window');
export default class HomePage extends Component {
constructor(props){
super(props)
this.state = {
apiData: [
{id:1,swiperText:'499¥ 限量抢购真八核 腾讯雷霆手机',imageUri: 'http://localhost:8081/images/banner/1.jpg'},
{id:2,swiperText:'购趣洗手液 赢迪士尼之旅 满88元减22元 满188元减66元',imageUri: 'http://localhost:8081/images/banner/2.jpg'},
{id:3,swiperText:'潮流焕新季 炫品抄底 3月大促销第三波 时间3月16日~22日',imageUri: 'http://localhost:8081/images/banner/3.jpg'},
{id:4,swiperText:'三月女人节 春装新品 折后满减 倒数计时',imageUri: 'http://localhost:8081/images/banner/4.jpg'}
]}
this.id = null;
this.swiperText = null;
this.imageUri = null;
}
render() {
const data = this.state.apiData;
let dataDisplay = data.map(function(jsonData){
return (
<View key={jsonData.id} style={styles.slide} >
<Text numberOfLines={1}>{jsonData.swiperText}</Text>
<Image resizeMode='stretch' style={styles.image} source={{uri: jsonData.imageUri}} />
</View>
)
});
return(
<View style={{flex: 1}}>
<ScrollView style={styles.container}>
<Swiper style={styles.wrapper} height={140} autoplay
onMomentumScrollEnd={(e,state,context) => console.log('index:',state.index)}
dot={<View style={{backgroundColor:'rgba(0,.3)',width: 6,height: 6,borderRadius: 3,margin: 5 }} />}
activeDot={<View style={{backgroundColor:'red',margin: 5 }} />}
paginationStyle={{bottom: 0}} loop>
{dataDisplay}
</Swiper>
</ScrollView>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
wrapper: {

},
slide: {
justifyContent: 'center',
backgroundColor: 'transparent'
},
image: {
width:width,
height: 130,
});

安卓和苹果模拟器里最终运行的视频效果如下：

https://pan.baidu.com/s/1eZ9GZts9ILeT7NEpcuIOqw