【react native】ScrollView的触摸事件与TouchableWithoutFeedback的点击事件冲突

需求背景

使用 ScrollView 组件实现轮播图效果,该轮播图可以自动向右滑动。有下面两个需求:

(1)希望用户左右点击的时候,视图可以向左/向右滚动;

(2)希望用户触摸在屏幕的时候,轮播图不自动滚动,放开的时候重新计时5秒后向右滚动;

(3)在轮播视图内有一个按钮,希望我们在点击按钮并弹出弹窗的时候,轮播图停止计时,弹窗关闭后再重新计时。

需求分析

(1)我们可以使用 TouchableWithoutFeedback 组件,分别覆盖左右视图,当触发onPress的时候进行翻页。

(2)可以使用 ScrollViewonTouchStartonTouchEnd 事件,分别表示触摸开始和触摸结束时候的回调。

(3)事件的回调顺序是: onTouchStart > onPress > onTouchEnd ,所以下面的这种写法会导致,当点击share按钮的时候,打印如下:

javascript 复制代码
onTouchStart
click button, start to stop timer
onTouchEnd
// 执行完异步操作后会打印
start to start timer

但我们希望的是,能够打印如下:

javascript 复制代码
onTouchStart
click button, start to stop timer
// onTouchEnd 不打印
// 执行完异步操作后会打印
start to start timer
javascript 复制代码
state = {
  scrollViewTouchable: true,
};

handleSharePress = async() => {
  // 停止定时器
  console.log('click button, start to stop timer');
  this.handleStopTimer();

  // 处理 "Share" 按钮的逻辑
  // await ....

  // 打开定时器
  console.log('start to start timer');
  this.handleStartTimer();
};

render() {
  const { scrollViewTouchable } = this.state;

  return (
    <View>
      <ScrollView
        onTouchStart={scrollViewTouchable ? ()=>{this.handleStartTimer(); console.log('onTouchStart')} : undefined}
        onTouchEnd={scrollViewTouchable ? ()=>{this.handleStopTimer(); console.log('onTouchEnd')} : undefined}
        // 其他属性...
      >
        {/* ScrollView 内容 */}

        <TouchableOpacity
          onPress={this.handleSharePress}
        >
          <View style={styles.shareButton}>
            {/* Share 按钮内容 */}
          </View>
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
}

解决方法

通过阻止默认事件的方式好像不能解决上述问题,因为 TouchableWithoutFeedback 组件不会阻止事件冒泡到父组件。

所以我们考虑用一个state变量来控制 ScrollView 组件的触摸事件是否可用。在点击 "Share" 按钮时,将状态变量设置为 false,在 onPress 事件完成后,将状态变量设置回 true。

javascript 复制代码
state = {
  scrollViewTouchable: true,
};

handleSharePress = async() => {
  this.setState({ scrollViewTouchable: false });

  // 处理 "Share" 按钮的逻辑
  // await...

  this.setState({ scrollViewTouchable: true });
};

render() {
  const { scrollViewTouchable } = this.state;

  return (
    <View>
      <ScrollView
        onTouchStart={scrollViewTouchable ? this.handleStartTimer : undefined}
        onTouchEnd={scrollViewTouchable ? this.handleStopTimer : undefined}
        // 其他属性...
      >
        {/* ScrollView 内容 */}

        <TouchableOpacity
          onPress={this.handleSharePress}
        >
          <View style={styles.shareButton}>
            {/* Share 按钮内容 */}
          </View>
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
}
相关推荐
gnip5 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
掘金安东尼7 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
木西10 小时前
React Native DApp 开发全栈实战·从 0 到 1 系列(兑换-前端部分)
react native·web3·solidity
hj5914_前端新手11 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法11 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku11 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
LuckySusu11 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu11 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu11 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu11 小时前
【js篇】call() 与 apply()深度对比
前端·javascript