【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>
  );
}
相关推荐
黄瓜沾糖吃2 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟2 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
浩龙不eMo2 小时前
✅ Lodash 常用函数精选(按用途分类)
前端·javascript
爱分享的程序员2 小时前
前端面试专栏-算法篇:17. 排序算法
前端·javascript·node.js
Jackson_Mseven2 小时前
面试官:useEffect 为什么总背刺?我:闭包、ref 和依赖数组的三角恋
前端·react.js·面试
pe7er3 小时前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
pe7er3 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
islandzzzz3 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
喝拿铁写前端3 小时前
前端实战优化:在中后台系统中用语义化映射替代 if-else,告别魔法数字的心智负担
前端·javascript·架构
超人不会飛4 小时前
就着HTTP聊聊SSE的前世今生
前端·javascript·http