react native 轮播图组件(循环滚动卡片,垂直跑马灯效果)

react-native-ezswiper

源码地址： https://github.com/easyui/react-native-ezswiper

安装

$ npm install react-native-ezswiper --save

使用

引用

import EZSwiper from 'react-native-ezswiper';

demo效果图:

1 卡片轮播 (源码有中文文档具体参数自己参考)

                    style={{width: Kscreen_width,height:KH(160),backgroundColor: 'white'}}

                    //添加图片数据(下面是四张)

                          dataSource={['pic1','pic2','pic3','pic4']}

                    //Item的大小

                          width={ Kscreen_width }

                          height={KH(160)-KH(10)*2}

                    //Item的样子

                          renderRow={this._renderRow}

                    //是否循环

                          loop={true}

                    //Item点击事件

                          onPress={this._onPressRow}

                    //Item缩放高数设置

                          cardParams={{cardSide:Kscreen_width-KW(36)*2, cardSmallSide:KH(150)-KW(15)*2,cardSpace:0}}

                />

2 垂直跑马灯

                             style={{width: Kscreen_width-KW(40),height: KH(30),marginLeft:KW(10)}}

                              dataSource={['监督举报热线:400-000-0000', '提额+免息进行时!' ,'每邀请一人,奖励50']}

                              width={ Kscreen_width-KW(40)}

                              height={KH(30)}

                              renderRow={this._renderEZSwiperRow}

                              loop={true}

                            //水平滚动关闭垂直滚动打开

                              horizontal={false}

                            //滚动时间

                            autoplayTimeout={4}

                            onPress={this._onPressRow}

                          /********************* 垂直滚动 也可以手动滑动 这时候我们需要关闭********************/

                            scrollEnabled={false}

                    />

1.1关闭手动滚动

1 去到 EZSwiper 里面私自添加属性.

默认是为true 滚动

2 添加到方法

3 给ScrollView 加属性 (参考horizontal这个参数)

这样就实现了关闭手动滚动了! 

如果没有关闭是这样的!