基于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, { Component } from 'react';
import {
  StyleSheet,
  Text,
  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,0,0,.3)', width: 6, height: 6, borderRadius: 3, margin: 5 }} />}
                            activeDot={<View style={{backgroundColor:'red', width: 6, height: 6, borderRadius: 3, 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