最近在做一个医疗的项目(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差不多。
我是一个热爱编程的程序媛,写的有点水,勿喷。