easyui / react-native-ezswiper

swiper component for react-native

react-native-ezswiper

中文文档

source is simple, easy to use card swiper for React Native on iOS&android.

Installation

$ npm install react-native-ezswiper --save

Preview

Usage

import library：

import EZSwiper from 'react-native-ezswiper';

simple swiper

<EZSwiper style={{width: width,height: 150,backgroundColor: 'white'}}
          dataSource={['0', '1' ,'2','3']}
          width={ width }
          height={150 }
          renderRow={this.renderRow}
          onPress={this.onPressRow}                      
          />

card swiper

<EZSwiper style={{width: width,height: 150,backgroundColor: 'white'}}
           dataSource={images}
           width={ width }
           height={150 }
           renderRow={this.renderImageRow}
           onPress={this.onPressRow} 
           ratio={0.867}                    
                    />

advanced

<EZSwiper style={{width: width,height: 150,backgroundColor: 'white'}}
                    dataSource={['0', '1' ,'2','3']}
                    width={ width }
                    height={150 }
                    renderRow={this.renderRow}
                    onPress={this.onPressRow} 
                    index={2}                
                    cardParams={{cardSide:width*0.867, cardSmallSide:150*0.867,cardSpace:width*(1-0.867)/2*0.2}}  
                    />

vertical swiper

<EZSwiper style={{width: width,height: 200,backgroundColor: 'white'}}
          dataSource={['0', '1' ,'2','3']}
          width={ width }
          height={200 }
          renderRow={this.renderRow}
          onPress={this.onPressRow} 
          ratio={0.867} 
          horizontal={false}  
                    />

API

Props

key	type	default	description
width	PropTypes.number.isRequired		swiper width
height	PropTypes.number.isRequired		swiper height
index	PropTypes.number	0	initial index
offset	PropTypes.number	0	initial left and right or up and down offsets
horizontal	PropTypes.bool	true	swiper derection is horizontal
loop	PropTypes.bool	true	swiper is loop
autoplayTimeout	PropTypes.number	5	auto play mode (in second)
autoplayDirection	PropTypes.bool	true	cycle direction control
ratio	PropTypes.number	1	scaling ratio
cardParams	PropTypes.object	{}	swiper card advanced object
renderRow	PropTypes.func.isRequired		render card view
onPress	PropTypes.func		card is clicked action
onWillChange	PropTypes.func		next card will show
onDidChange	PropTypes.func		next card showed

cardParams is object：{cardSide,cardSmallSide,cardSpace}

Function

function	description
scrollTo(index, animated = true)	scroll to position

License

MIT License. © Zhu Yangjun 2017

react-native-ezswiper's Issues

老铁, 这个你写完了吗， 腻子试一下

真机卡顿

滑动的时候，真机卡顿，我打了断点，滑动的时候做了过多的计算，十张左右卡片，滑动一次，计算了大概超过300次

renderRow中返回组件，但是iOS和android真机上都显示不出来，通过iOS图层看到是有存在组件的

`<EZSwiper
style={{
width: screenW,
height: scaleHeight(150),
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center'
}}
dataSource={this.state.banaListData}
width={screenW}
height={scaleHeight(150)}
renderRow={this.renderBananaRowView}
ratio={0.875}
/>
renderBananaRowView(item) {

    return (
        <View
            key={item}
            style={{
                width: (screenW) * 0.875,
                height: scaleHeight(150),
                backgroundColor: 'blue',
                borderRadius: 10,
                justifyContent: 'center',
                alignItems: 'center'
            }}
        >
            <Image
                // source={{ uri: item.pic }}
                source={require('../../Resource/defaultIcon/small_default_image.png')}
                style={{
                    width: (screenW) * 0.875,
                    height: scaleHeight(150),
                    borderRadius: 10,
                    backgroundColor: '#f4f4f4',
                }}
            />
        </View>
    );
}`

点击事件不触发

<EZSwiper style={{height: scaleSize(85), width: screenSize.width}} dataSource={['0', '1', '2']} loop={false} width={screenSize.width} height={scaleSize(85)} renderRow={this.renderRow} onPress={v => { console.log(v); }} index={1} ratio={0.8} />
最左边显示的组件点击不会触发点击事件

在最后一个图片的时候 放大会有问题

已经发视频到您的邮箱了。烦请指导

请问可以一次性展示多个item吗

使用组件发现，一次只能展示一个item，能不能支持一次展示多个item，并且两边缩进的

老铁有空加个轮播带小圆点的就更好了

horizontal设置为false的时候，设置loop等属性无法自动滚动

也就是说 垂直效果不支持自动播放
麻烦您有空的时候 能帮忙看下吗

重新渲染会出现问题

重新渲染后会报错。
排查后发现是代码中 componentWillReceiveProps函数
把nextProps错误的写成了this.nextProps

不维护了? iOS疯狂滚动

不维护了? iOS疯狂滚动

android上开发过程中

android上开发过程中，ezswiper在滑动到断点（['0', '1' ,'2','3'],在0和3的切换时）的时候会闪一下，请问还有其他人遇到的吗？这问题解决了没？

VoiceOver users are unable to click buttons inside swiper pages

Each swiper is currently being wrapped in a TouchableWithoutFeedback which as a Touchable is set to accessible={true} by default. This is preventing VoiceOver users from interacting with Touchable elements inside the page.

为什么滚动会感觉不流畅？能否左右压缩不要太大？

为什么滚动会感觉不流畅？能否左右压缩不要太大？

安卓不能自动播放

文档中没有 dataSource 参数的说明？

不能自动播放,需要放上去拖动一下才能自动播放

不能自动播放,需要放上去拖动一下才能自动播放

onDidChange获取到的index有问题

onDidChange获取到的index有问题，从后往前返回时，获取不到正确的index（当滚动到第一个时获取到的index依然是1）

图片添加圆角时，只有左边才有圆角，右边还是直角

有变形问题，如何解决？

在存在多个scrollView的flatlist中使用时，无法自动播放

另，切换switchNavigation的时候，轮播就白屏了

Props feature request

Instead of dataSource prop can you please create a prop that just takes the dataSource length.I thought of working around by making changes in the EZSwiper.js component in the react-native-ezswiper node modules package but i couldn't understand the workaround so i just left. 😛

能支持一屏幕展示多张图和滑动多张吗

自动播放尤文提

加页码指示器，自动播放就会停掉啊

android 开发过程有问题

card swiper 在android上开发过程中，swiper在滑动到断点（['0', '1' ,'2','3'],在0和3的切换时）的时候会闪一下
还有就是android开发环境中到了最后一个元素后不能自动轮播， 就停止在哪里

建议寻找更多维护者或者README中说明一下

当页面加载之后 重新再给EZSwiper重新赋值 页面刷新有问题

例如：当前有两张图片，重新给EZSwiper赋值为三张图片，页面刷新之后只展示一张图片，但滑动一下后，页面展示正确

滑动速度

你好，可以添加一个垂直或者水平滑动速度的属性吗