React Native开源广告轮播组件

[译]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技术爱好者加入交流!

运行效果

更多实例点击进入:https://github.com/race604/react-native-viewpager/blob/master/Sample

配置安装

1.组件安装:

npm install react-native-viewpager --save

2.组件使用方法如下:

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)
    });
  }}
/>