码迷,mamicode.com
首页 > 其他好文 > 详细

RN无限轮播

时间:2018-11-21 15:51:16      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:插件   styles   idt   simple   extend   save   opacity   back   turn   

这里我使用的是一个第三方的插件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‘,
    }
});

 

RN无限轮播

标签:插件   styles   idt   simple   extend   save   opacity   back   turn   

原文地址:https://www.cnblogs.com/hualuoshuijia/p/9994075.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!