JDViewPager (支持lite版)

轮播图组件。最基本的使用方式就是创建一个JDViewPager.DataSource数据源，然后给它传递一个普通的数据数组，再使用数据源来实例化一个JDViewPager组件，并且定义它的renderPage回调函数，这个函数会接受数组中的每个数据作为参数，返回一个可渲染的组件（作为renderPage的每一页）。

JDViewPager

属性

dataSource JDViewPager.DataSource

数据源

renderPage function

render每一页的回调方法，方法参数是当前页的数据

onChangePage function

切换页面时(前)被触发，方法参数是当前第几页

renderPageIndicator bool|function

如果传的是boolean值且值为false，则不渲染指示点 如果传的是方法，则该方法要返回一个React组件，JDViewPager会自动注入以下三个props: goToPage: functioin 切换页面的执行函数 activePage: number 当前页 pageCount: number 总页数

isLoop bool

是否循环执行切换页面

locked bool

是否禁止用户手动拖拽切换页面

nobounce bool

第一页不能向左滑，最后一页不能向右滑

nofresh bool

是否刷新轮播图

autoPlay bool

是否自动切换页面

distance number

水平滑动的距离大于多少时，翻页

alwaysShowIndicator bool

只有一张图片时，也显示指示器

JDViewPager.DataSource

方法

constructor(params)

你可以在构造函数中针对数据提供自定义的提取方法getPageData和pageHasChanged比对方法。如果不提供，则会使用默认方法来提取行数据

cloneWithPages(dataBlob: any, pageIdentities: ?Array)

根据指定的dataBlob和 rowIdentities为DataSource复制填充数据。dataBlob即原始数据。需要在初始化时定义抽取函数（否则使用默认的抽取函数）。 pageIdentities是一个数组，包含了行数据对应的id标识符，例如['key1', 'key2', ...]。如果没有指定此数组，则默认取行数据的key。

代码示例

const React = require('react');
const {
  View,
  StyleSheet,
} = require('react-native');
const {
  JDDevice,
  JDTouchable,
  JDImage,
  JDViewPager,
  JDThemeText
} = require('@jdreact/jdreact-core-lib');

const BANNERS = [
  {
    "bannerId": 4686,
    "imgUrl": "https://img30.360buyimg.com/njmobilecms/jfs/t3187/78/2902161405/46549/af9d93d1/57e7dea2N384f1a2f.jpg",
    "linkUrl": "https://sale.jd.com/m/act/cvJgdk3mbf7.html",
  },
  {
    "bannerId": 4694,
    "imgUrl": "https://img30.360buyimg.com/njmobilecms/jfs/t3142/277/2531782606/27298/32f7ec49/57e346ebN5082df8d.jpg",
    "linkUrl": "https://1.m.jd.com/detail/next?itemId=1300000000000119106",
  }
];

class ArrayViewPager extends React.Component {
  static defaultProps = function() {
    let dataSource = new JDViewPager.DataSource({
      pageHasChanged: (p1, p2) => p1 !== p2,
    });
    return {
      dataSource: dataSource.cloneWithPages(BANNERS)
    };
  }();

  state = {
    pageNow: 0
  };

  render() {
    return (
      <View style={styles.wrapper}>
        <JDThemeText>DataSource为数组的用法</JDThemeText>
        <JDViewPager
          style={styles.viewPager}
          dataSource={this.props.dataSource}
          renderPage={this._renderPage}
          isLoop={true}
          autoPlay={true}
          onChangePage={this._onChangePage}
          interval={1000}
        />
        <JDThemeText>
          <JDThemeText>pageNow: </JDThemeText>
          <JDThemeText>{this.state.pageNow}</JDThemeText>
        </JDThemeText>
      </View>
    );
  }

  _renderPage = (data) => {
    return (
      <JDTouchable style={styles.bannerItem}>
        <JDImage style={styles.bannerImage} source={{uri: data.imgUrl}} />
      </JDTouchable>
    );
  };

  _onChangePage = (pageNumber) => {
    this.setState({
      pageNow: pageNumber
    });
  };
}

const BANNER_HEIGHT = JDDevice.width * 200 / 640;
const styles = StyleSheet.create({
  wrapper: {
    marginBottom: JDDevice.getRpx(40),
  },
  viewPager: {
    width: JDDevice.width,
    height: BANNER_HEIGHT,
    overflow: 'hidden',
  },
  bannerItem: {
    flex: 1
  },
  bannerImage: {
    width: JDDevice.width,
    height: BANNER_HEIGHT,
    resizeMode: 'stretch',
  }
});

module.exports = ArrayViewPager;