react-native 轮播组件 looped-carousel使用介绍

一关于轮播类组件，网上其实已经有挺多了，本人曾经用过 swiper，viewpager，以及facebook出品的viewpagerAndroid。

swiper因在安卓上有问题，而且在组件嵌套使用时问题较多，所以弃用。

后来尝试viewpager，因为轮播时，下面的圆点显示有误，所以弃用。

而ViewpagerAndroid因为只支持安卓系统，所以很少用到，在ios必须另找组件。

最近发现了新的组件 react-native-looped-carousel ，看着还不错，于是介绍一下使用方法。

二 looped-carousel使用介绍

安装

npm install react-native-looped-carousel --save

属性

Name	propType	default value	description
autoplay	boolean	true	是否自动轮播
delay	number	4000	多少毫秒切换一次
currentPage	number	0	设置初始页
pageStyle	style	null	页面的样式
contentContainerStyle	style	null	`contentContainerStyle` for the scrollView
onAnimateNextPage	func	null	切换轮播图时的回调方法
swipe	bool	true	是否允许手势滑动也换页面
分页	---	---	---
pageInfo	boolean	false	是否在底部显示`当前页面下标 / 页面个数`
pageInfoBackgroundColor	string	'rgba(0, 0, 0, 0.25)'	分页的背景色
pageInfoBottomContainerStyle	style	null	pageInfo容器的样式
pageInfoTextStyle	style	null	pageInfo中的文本样式
pageInfoTextSeparator	string	' / '	在 `当前页面下标` 和 `页面个数`之间的分隔符
小圆点	---	---	---
bullets	bool	false	是否在轮播的底部显示小圆点
bulletStyle	style	null	bullet（小圆点）的样式
bulletsContainerStyle	style	null	style for the bullets container
chosenBulletStyle	stlye	null	bullet的容器的样式
导航箭头	---	---	---
arrows	bool	false	是否显示轮播的导航箭头
arrowsStyle	style	null	导航箭头的样式
arrowsContainerStyle	style	null	导航箭头的容器样式
leftArrowText	string / element	'Left'	左箭头的文字或图片
rightArrowText	string / element	'Right'	label / icon for right navigation arrow

使用

import React, { Component } from 'react';
import {Text,View,Dimensions,
} from 'react-native';
import Carousel from 'react-native-looped-carousel';const { width, height } = Dimensions.get('window');export default class CarouselExample extends Component {constructor(props) {super(props);this.state = {size: { width, height },};}_onLayoutDidChange = (e) => {const layout = e.nativeEvent.layout;this.setState({ size: { width: layout.width, height: layout.height } });}render() {return (<View style={{ flex: 1 }} onLayout={this._onLayoutDidChange}><Carouseldelay={2000}style={this.state.size}autoplaypageInfoonAnimateNextPage={(p) => console.log(p)}><View style={[{ backgroundColor: '#BADA55' }, this.state.size]}><Text>1</Text></View><View style={[{ backgroundColor: 'red' }, this.state.size]}><Text>2</Text></View><View style={[{ backgroundColor: 'blue' }, this.state.size]}><Text>3</Text></View></Carousel></View>);}
}

以上是作者的使用事例，比较简单，下面我结合它公开的属性来慢慢展开：

1.显示下面的分页个数的

<Carousel
    delay={2000}   //自动切换的延迟 （毫秒）
    style={{width:375,height:200}}  //轮播组件的样式
    autoplay    //自动轮播
    pageInfo    //在底部显示当前页面下标 / 页面个数
    swiper      //允许手势滑动
    pageInfoBackgroundColor={'#fff'}  //分页标示的背景色
    onAnimateNextPage={(p) => console.log(p)}  //切换页面时的回调
    pageInfoTextStyle={{color:'blue'}}     //下面字体样式
    pageInfoTextSeparator={'!!!'}          //中间的分隔符
>
    {React.Children.map(['aa','bb','cc'],(child,index)=>{return(<View style={styles.container}>
            <Text>{child+','+index}</Text>
            </View>
        )})}
</Carousel>

看一下图，该项目是我平时写demo的，所以凌乱的动画请无视。。

2. 显示小圆点的

<Carousel
    delay={2000}   //自动切换的延迟 （毫秒）
    style={{width: 375, height: 200}}  //轮播组件的样式
    autoplay    //自动轮播
    pageInfo={false}    //在底部显示当前页面下标 / 页面个数
    swiper      //允许手势滑动

    bullets={true}  //显示小圆点
    bulletStyle={{backgroundColor: '#fff', width: 5, height: 5}} //未选中时小圆点的样式
    chosenBulletStyle={{backgroundColor: 'red', width: 5, height: 5}}//选中时小圆点的样式

    arrows={true}  //显示导航箭头
    leftArrowText="left️" //左导航
    arrowsContainerStyle={{paddingHorizontal:20}}   //箭头容器样式
    rightArrowText={<Animated.Image  //右导航
        style={{transform: [{rotate: spin}],
            height:20,
            width:20
        }}source={require('./img/a.jpg')}/>}
>
    {React.Children.map(['aa', 'bb', 'cc'], (child, index) => {return (<View style={styles.container}>
                <Text>{child + ',' + index}</Text>
            </View>
        )})}
</Carousel>

如图所示：

目前看上去还是很方便的，有需要的可以看一下啊~

react-native 轮播组件 looped-carousel使用介绍相关推荐

基于移动端Reactive Native轮播组件的应用与开发详解
总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo. reactive native是什么由facebo ...
《layui宇宙版教程》：轮播组件carousel
<Layui宇宙版教程>提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入: 1.30 轮播组件carousel carousel主要适用于跑 ...
React Native 二常用组件与开源组件
2019独角兽企业重金招聘Python工程师标准>>> #0.手把手教React Native实战之开山篇##作者简介东方耀 Android开发RN技术 facebookgithub ...
响应式轮播_角度2的响应式轮播组件
响应式轮播 Update (March 22, 2016): Provided a Demo Link which is available on PlunkerUpdate (March 21, 2 ...
Omi-touch实战移动端图片轮播组件的封装
pc端的轮播,移动端的轮播都很常见.一年前,我还为手机端没有左滑,右滑事件从而封装了一个swipe库,可以自定义超过多少滑动时间就不触发,也可以设置滑动多少距离才触发,这一个功能的代码就达到400多行 ...
推荐一款带暂停功能的轮播组件，不要谢我，我叫红领巾！
阅读目录一.效果展示 1.先跟大家见个面,打个招呼 2.什么?切换太慢了?好,加快速度! 3.加入其他功能 4.图片太小,看不出效果?好,那来个大图感受下! 5.如果你不想要右上角的小图标,照样可以 ...
【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 )
文章目录一.flutter_swiper 插件二.Swiper 组件使用三.完整代码示例四.相关资源一.flutter_swiper 插件到 https://pub.dev/package ...
Vue.js-Day06-PM【项目实战(附带完整项目源码)-day01-pm：轮播组件（使用、安装依赖、具体操作过程）、favicon详细制作】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图. 而除了直接看的见的躯体之外,一个完整的" ...
ES6公用立体轮播组件的封装及使用
ES6公用立体轮播组件的封装及使用源码github链接:https://github.com/XieTongXue/how-to/tree/master/carousel-3d 1.效果展示 2.容 ...

react-native 轮播组件 looped-carousel使用介绍

安装

属性

使用

react-native 轮播组件 looped-carousel使用介绍相关推荐

最新文章

热门文章