RN无限轮播

Posted 2021-01-21 hualuoshuijia

这里我使用的是一个第三方的插件react-native-swiper

具体可以参考https://www.npmjs.com/package/react-native-swiper

效果图

 

使用：

$ npm i react-native-swiper --save

 代码：

import React, {Component} from ‘react‘;
import {
    AppRegistry,
    StyleSheet,
    Text,
    View, TouchableOpacity, Image, ScrollView
} from ‘react-native‘;
import Swiper from ‘react-native-swiper‘
var Dimensions = require(‘Dimensions‘);
var {width,height} = Dimensions.get("window");//第一种写法
export default class MyApp extends Component {

   _onIndexChanged(index){
       // alert(index)
   }
    render() {
        return (
           <View style={styles.wrapper}>

               <View style={styles.swiperView}>
                   <Swiper style={styles.swiperStyle}
                           showsButtons={false}//左右两边的< >箭头是否显示
                           horizontal={true}//是否水平滚动，默认true
                           loop={true}//是否轮播，默认true
                           index={1}//当前默认第几页，默认0
                           onIndexChanged={this._onIndexChanged}//当前滚动到第几页的事件
                           autoplayTimeout = {1}  //轮播的时间
                           autoplay={true}//是否自动轮播，默认false
                           autoplayDirection={true}//是否反向轮播，默认true 左->右
                           showsPagination = {true}  //是否显示dot
                           dot = {<View style={{width:8,height:8,backgroundColor:‘red‘,marginRight: 5}}/>} //指定dot
                           paginationStyle = {{bottom: 10}} //dot的位置
                           activeDot = {<View style={{width:8,height:8,backgroundColor:‘yellow‘,marginRight: 5}} />} //选中的dot的样式

                   >
                       <View style={styles.slide1} >
                           <Text style={styles.text}>Hello Swiper{width}</Text>
                       </View>
                       <View style={styles.slide2} >
                           <Text style={styles.text}>Beautiful</Text>
                       </View>
                       <View style={styles.slide3}>
                           <Text style={styles.text}>And simple</Text>
                       </View>
                   </Swiper>
               </View>
           </View>
        )
    }
}

const styles = StyleSheet.create({
    wrapper: {
       flex: 1,
       backgroundColor:"#ff0000"

    },
    swiperView:{
        width:width,
        height:200,
        backgroundColor:"#000000"
    },
    swiperStyle:{
        backgroundColor:"#00ff00"
    },
    slide1: {
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        backgroundColor: ‘#0000ff‘,
        flex: 1
    },
    slide2: {
        flex: 1,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        backgroundColor: ‘#0000ff‘,
    },
    slide3: {
        flex: 1,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        backgroundColor: ‘#0000ff‘,
    },
    text: {
        color: ‘#fff‘,
        fontSize: 30,
        fontWeight: ‘bold‘,
    }
});