react native中使用react-native-viewpager实现的商品展示添加点击事件

对于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)
        };
      }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值