对于android,react-native-viewpager这个第三方实现商品展示很好用
<ViewPager
dataSource={this.state.adDataSource}
renderPage={this._renderPage}
isLoop={true}
autoPlay={true} />
开始我想给商品添加点击事件,直接在ViewPager外包裹TouchableOpacity,发现点击事件和滑动事件直接冲突,处理方法如下:
renderPage方法返回单个视图的渲染,于是我们可以在这个方法里的图片外添加点击事件
_renderPage(data: Object) {
return (
<TouchableOpacity onPress={() => this.viewPagerCheck()}>
<Image style={styles.viewPager_ad} source={{uri: data}}/>
</TouchableOpacity>
);
}
这时发现只要点击就一直报错,原来我们还需要绑定这个方法才能实现,在构造方法里添加this._renderPage = this._renderPage.bind(this); 这样就绑定了:
// 构造
constructor(props) {
super(props);
this._renderPage = this._renderPage.bind(this);
var dataSource = new ViewPager.DataSource({
pageHasChanged: (p1, p2) => p1 !== p2,
});
// 初始状态
this.state = {
adDataSource: dataSource.cloneWithPages(IMGS)
};
}