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

Z时代
2024-01-10
分类：综合

react

安装轮播插件：

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,
    },
});