React-Native之swiper(轮播组件)

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

react

使用说明：
1. 先安装React-native-swiper
npm i react-native-swiper –save
2. 导入Swiper
import Swiper from ‘react-native-swiper’;

代码：

import React, {Component} from 'react'
import {
    StyleSheet,
    Text,
    View
} from 'react-native'
import Swiper from 'react-native-swiper'
const styles =StyleSheet.create( {
    wrapper: {
    }, //整体样式
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9bebe5'
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#e3b1e5'
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#90d985'
    },
    text: {
        color: '#ff6fa3',
        fontSize: 30,
        fontWeight: 'bold'
    }
});
export default class HomePage extends Component{
    render(){
        return(
            <Swiper style={styles.wrapper}
                    showsButtons={true}         //显示控制按钮
                    loop={true}                    //如果设置为false，那么滑动到最后一张时，再次滑动将不会滑到第一张图片。
                    autoplay={true}                //自动轮播
                    autoplayTimeout={3}          //每隔3秒切换
                    dot={<View style={{           //未选中的圆点样式
                        backgroundColor: 'rgba(0,0,0,0.2)',
                        width: 18,
                        height: 18,
                        borderRadius: 4,
                        marginLeft: 10,
                        marginRight: 9,
                        marginTop: 9,
                        marginBottom: 9,
                    }}/>}
                    activeDot={<View style={{    //选中的圆点样式
                        backgroundColor: '#83ffcf',
                        width: 18,
                        height: 18,
                        borderRadius: 4,
                        marginLeft: 10,
                        marginRight: 9,
                        marginTop: 9,
                        marginBottom: 9,
                    }}/>}
            >
                <View style={styles.slide1}>
                    <Text style={styles.text}>青衣</Text>
                </View>
                <View style={styles.slide2}>
                    <Text style={styles.text}>冷秋</Text>
                </View>
                <View style={styles.slide3}>
                    <Text style={styles.text}>听雨</Text>
                </View>
            </Swiper>
        )
    }
};

效果：

带有图片的轮播：

import React, { Component } from 'react'
import {
    View,
    Image,
    Dimensions,
    StyleSheet
} from 'react-native'
import Swiper from 'react-native-swiper';
const { width, height } = Dimensions.get('window');//获取手机的宽和高
const styles =StyleSheet.create( {
    wrapper: {
    },
    container: {
        flex: 1,//必写
    },
    image: {
        width,//等于width:width
        height,
    }
});
export default class HomePage extends Component {
    render () {
        return (
            <View style={styles.container}>
                <Swiper style={styles.wrapper}
                        showsButtons={true}       //为false时不显示控制按钮
                        paginationStyle={{      //小圆点位置
                            bottom: 70
                        }}
                        loop={false}        //如果设置为false，那么滑动到最后一张时，再次滑动将不会滑到第一张图片。
                        autoplay={true}          //自动轮播
                        autoplayTimeout={2}      //每隔2秒切换
                >
                    <Image style={styles.image} source={require('../images/1.jpg')}/>
                    <Image style={styles.image} source={require('../images/2.jpg')}/>
                    <Image style={styles.image} source={require('../images/4.jpg')}/>
                </Swiper>
            </View>
        )
    }
}