实现一个react-native的轮播图

2017-06-30  本文已影响0人  Da_Yao

最近在做一个医疗的项目(iOS),采用react-native技术。其中有轮播图的实现,一开始采用react-native-swiper这个插件,但是有一个bug,在跳到下一页返回这页或是侧滑返回的时候,轮播图会出现图片不显示显白的问题,找了好多地方论坛、网站都没有相关的问题,测了好多次,感觉是侧滑时图片正在轮播,这期间的反应时间可能就是显白的原因吧,奈何没有办法解决,我想换一种方法实现吧。

用了scrollView来写,加个定时器实现,但是当轮播图轮播一定时间后会闪退,xcode显示内存泄露的问题。于是我又重新搜索,好嘛,这次找到了一个叫做react-native-viewpager的插件,我又试了一下,这次可以喽,不会有显白的问题。

具体操作:npm install react-native-viewpager --save

导入  import ViewPager from 'react-native-viewpager'

使用

style={{height: ScreenW * 2 / 3}}

renderPageIndicator={false}

dataSource={this.state.dataSource}

renderPage={this._renderPage.bind(this)}

isLoop={true}

autoPlay={true} />

_renderPage(data, pageID) {

return (

source={{uri: data.image}}

style={styles.page}/>

);

}

这样实现了一个轮播图

其实和ListView差不多。

我是一个热爱编程的程序媛,写的有点水,勿喷。

上一篇 下一篇

猜你喜欢

热点阅读