React Native开源广告轮播组件

最新推荐文章于 2024-08-24 09:07:42 发布

CY2017

最新推荐文章于 2024-08-24 09:07:42 发布

阅读量3.1k

点赞数

分类专栏： app开发 C#

C# 同时被 2 个专栏收录

77 篇文章 0 订阅

订阅专栏

app开发

23 篇文章 0 订阅

订阅专栏

[译]React Native开源广告轮播组件(react-native-viewpager)

2016/03/16 | React Native组件资源,外文翻译 | Sky丶清 | 4条评论 | 1376 views

尊重版权,转载请注明出处

本文来自:江清清的技术专栏-翻译组(http://www.lcode.org)

翻译计划项目:https://github.com/jiangqqlmj/js-coach-cn

开源项目地址:https://github.com/race604/react-native-viewpager

项目介绍

该广告轮播组件(ViewPager)同时兼容Android和iOS平台,该仅仅通过React Native平台JavaScript实现。该组件像ListView一样可以加载上百页数据并且表现性能良好。在Android平台上面除此特性以外,ViewPager还支持自动循环无限轮播功能。

刚创建的React Native技术交流3群(496508742)欢迎各位大牛,React Native技术爱好者加入交流!

运行效果

配置安装

1.组件安装:

1	`npm install react-native-viewpager --save`

2.组件使用方法如下:

1

2

3

4

 
         var 
          ViewPager = require( 
         'react-native-viewpager' 
         ); 
        
         <ViewPager 
        
         dataSource={ 
         this 
         .state.dataSource} 
        
         renderPage={ 
         this 
         ._renderPage}/>

组件配置

dataSource: 配置轮播的数据
renderPage: 需要显示的页面
autoPlay:设置是否自动轮播
isLoop: 设置是否循环
locked: 设置禁止触摸滚动
onChangePage: 页面切换回调
renderPageIndicator: 设置页面滚动指示器

页面切换动画配置

animation: 进行渲染React Native动画配置

使用实例

 
         var 
          ViewPager = require( 
         'react-native-viewpager' 
         ); 
        
         <ViewPager 
        
         dataSource={ 
         this 
         .state.dataSource} 
        
         renderPage={ 
         this 
         ._renderPage} 
        
         animation = {(animatedValue, toValue, gestureState) => { 
        
         // Use the horizontal velocity of the swipe gesture 
        
         // to affect the length of the transition so the faster you swipe 
        
         // the faster the pages will transition 
        
         var 
          velocity = Math.abs(gestureState.vx); 
        
         var 
          baseDuration = 300; 
        
         var 
          duration = (velocity > 1) ? 1/velocity * baseDuration : baseDuration; 
        
         return 
          Animated.timing(animatedValue, 
        
         { 
        
         toValue: toValue, 
        
         duration: duration, 
        
         easing: Easing.out(Easing.exp) 
        
         }); 
        
         }} 
        
         />