首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React本机ScrollView阻止/允许在滚动开始事件上滚动

基础概念

ScrollView 是 React Native 中的一个组件,用于在应用中实现可滚动的视图区域。它类似于网页中的 div 元素配合 CSS 的 overflow: scroll 属性。ScrollView 提供了多种事件,其中之一就是 onScrollBeginDrag,这个事件在用户开始拖动滚动视图时触发。

相关优势

  • 灵活性ScrollView 可以包含任何类型的子组件,提供了极大的布局灵活性。
  • 性能优化:React Native 的 ScrollView 组件经过优化,可以处理大量数据和复杂布局,同时保持流畅的用户体验。
  • 事件处理:通过 onScrollBeginDrag 等事件,开发者可以实现复杂的滚动交互逻辑。

类型

React Native 的 ScrollView 主要有以下几种类型:

  • 普通 ScrollView:基本的滚动视图。
  • FlatListSectionList:这两个组件是 ScrollView 的高级形式,专门用于优化长列表的渲染性能。

应用场景

ScrollView 适用于需要展示大量内容,且内容超过屏幕显示区域的场景,例如新闻列表、商品列表、图片画廊等。

遇到的问题及解决方法

问题:如何阻止或允许在滚动开始事件上滚动?

在某些情况下,你可能希望在用户开始拖动 ScrollView 时阻止或允许滚动。这可以通过控制 ScrollViewscrollEnabled 属性来实现。

阻止滚动
代码语言:txt
复制
import React, { useState } from 'react';
import { ScrollView, Button, View, Text } from 'react-native';

const App = () => {
  const [scrollEnabled, setScrollEnabled] = useState(true);

  const handleScrollBeginDrag = () => {
    setScrollEnabled(false);
  };

  return (
    <View>
      <ScrollView
        scrollEnabled={scrollEnabled}
        onScrollBeginDrag={handleScrollBeginDrag}
      >
        {/* 子组件 */}
      </ScrollView>
      <Button title="允许滚动" onPress={() => setScrollEnabled(true)} />
    </View>
  );
};

export default App;

在这个例子中,当用户开始拖动 ScrollView 时,handleScrollBeginDrag 函数会被调用,将 scrollEnabled 设置为 false,从而阻止滚动。用户可以通过点击按钮来重新允许滚动。

允许滚动

如果你希望在某些条件下允许滚动,只需确保 scrollEnabled 属性为 true 即可。

参考链接

通过上述方法,你可以灵活地控制 ScrollView 的滚动行为,以满足不同的应用需求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React-native踩坑小记

React-native踩坑小记 最近开始研究ReactNative咯,大概一两周了吧已经,略略说一下遇到的一些坑爹问题 问题一般都出在android。。。...于是我们开始研究android的触摸事件到底是怎么个执行法。 大致是一个先捕获,再冒泡的过程: 最外层组件触发回调,询问是否捕获事件,并阻止事件继续传递。...React-native中,View组件有如下几个常用事件: 争权的几个事件(通过返回值来确定这次操作应该由谁来响应) onStartShouldSetResponder onMoveShouldSetResponder...我们这里使用了setNativeProps方法进行锁定scrollview。 setNativeProps不会触发重绘,直接改变React对象的props值。...虽说有的时候手快了,还是会拦截不到事件-.- 然而当我下载了我司客户端后发现有时也会存在这个问题我就坦然了,233333333) 一个简单的阻止外层scrollview滑动的栗子 所使用插件的链接: 当下最好用的列表插件

4.5K80

React Native之ScrollView控件详解

概述 ScrollViewAndroid和ios原生开发中都比较常见,是一个 滚动视图控件。RN开发中,系统也给我们提供了这么一个控件。...不过RN开发中 ,使用ScrollView必须有一个确定的高度才能正常工作,因为它实际所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)。...ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者。...5:on-drag 当拖拽开始的时候隐藏软键盘。 6:interactive 软键盘伴随拖拽操作同步地消失,并且如果往上滑动会恢复键盘。安卓设备不支持这个选项,会表现的和none一样。...32:(ios)scrollEventThrottle number 这个属性控制滚动过程中,scroll事件被调用的频率(单位是每秒事件数量)。

5.9K70
  • 仿腾讯课堂固定滚动列表ReactNative组件

    -- 外层滚动容器到顶部+手势往上则通知内层滚动容器开始滚动;内层到顶部+手势往下则通知外层开始滚动。...发现第一种方法解决如何寻找子控件并判断滚动状态没有方法(可能是我没发现)以及性能上的考量,那就采用第二种方法。 分析 为了解决上面的问题,我们需要了解几个关键点。...属性发现其屏幕的LocationOnScreenX坐标不同,如果当前滚动容器显示则等于0。...剩下最后一个如何通知内层容器滚动呢?先卖个关子,解决这个问题之前,我们先来了解下Android中的View事件是如何传递的。 正所谓知己知彼,百战不殆,看看Android触摸事件类型有哪些?...接口的类 JavaScript要做的事 4.实现对应的JavaScript模块 开始动手 1.创建原生固定滚动控件 根据前面的分析,我们知道写原生滚动控件主要是重写控制拦截事件方法onInterceptTouchEvent

    4.9K70

    Android 类似UC浏览器的效果:向上滑动地址栏隐藏功能

    思路要求 ScrollView 嵌套 地址栏 和 WebView 手指滑屏向下滚动(网页向上),如果网页有滚动条,首先把 地址栏 滚动到消失,然后 WebView 才开始滚动; 手指滑屏向上滚动(网页向下...把 ScrollView 设置为 WebView 的一个变量, WebView的 onInterceptTouchEvent 方法里检测到 MotionEvent.ACTION_DOWN 事件后中断事件..., WebView 的 onTouchEvent 事件中根据具体情况决定是把 MotionEvent.ACTION_MOVE 事件传送给 ScrollView 还是留给自己 由于MotionEvent.ACTION_MOVE...事件传送给 ScrollView 后无法一次 Touch 事件中再接收,所以会导致如果有地址栏,向下滑动第一次只能滑动到 ScrollView 消失 + Hack网页,加入JS脚本,前行让网页顶部空出来一段空白...继承自 ScrollView onTouchEvent 中阻止 MotionEvent.ACTION_MOVE 事件 public class MyScrollView extends ScrollView

    1.5K20

    基础篇章:关于 React Native 之 ListView 组件的讲解

    我和ScrollView那家伙不太相同,我更适于长列表数据,且元素个数可以增删。和ScrollView不同的是,我并不立即渲染所有元素,而是优先渲染屏幕可见的元素。怎么样?是不是感觉我更聪明?...我母亲制定的官方介绍中,这么说:有一些性能优化使得我ListView可以滚动的更加平滑,尤其是动态加载可能很大(或者概念无限长的)数据集的时候: 只更新变化的行 - 提供了rowHasChanged...onEndReached function 当所有的数据都已经渲染过,并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用。原生的滚动事件会被作为参数传递。...每一次渲染过程中Footer(尾)该会一直列表的底部,header(头)该会一直列表的头部 renderHeader function 与同理 renderRow function (rowData...renderScrollComponent function 返回列表行呈现的滚动组件的功能。默认为ScrollView

    2K80

    Android的FixScrollView自定义控件

    需求模仿腾讯课堂视频播放详情页面,效果如图: 1外层滚动控件到顶部,内层控制滚动 2内层滚动到顶部,外层控制滚动 835108-20170331111709149-156183149.gif 835108...-20170331111723820-1491053367.gif 基本思路:是最外层有个父ScrollView,子tab页面中有ListView(React-native原生实现也是ScrollView...接下来要了解几个知识点, ①了解下Android事件分发的机制  ②了解哪些触摸类型事件以及之间的联系 ③如何在ViewGroup中寻找子控件(递归 找一个具体的控件大坑,尤其是再React-Native...写的控件树形结构中寻找两个tab页面的ListView) 1View事件分发机制 1.1 三个重要函数(暂时只需要下面那幅图可以完成这个需求) 前面做了基础热身之后,我们现在开始学习View的事件分发机制...) { //获取view整个屏幕中的坐标如果x==0的话代表这个scrollview是正在显示 int[] location

    1.8K80

    webview 和 React Native 中吸顶效果实现

    sticky 和 absolute 定位属性 ios 的表现不友好, scrollview 等视图容器组件内部滚动时候,可能存在抖动的问题,这样用户体验非常差。...show }}" > js 中: /* 处理滚动事件 */ handleScroll(event){ const { scrollTop } = event.detail...<ScrollView stickyHeaderIndices={[0]}//第一个子元素即头部组件,滑时吸顶 /> stickyHeaderIndices: 一个子视图下标的数组,用于决定哪些成员会在滚动之后固定在屏幕顶端...行组件显示或隐藏时可配置回调事件。 支持单独的头部组件。 支持单独的尾部组件。 支持自定义行间分隔线。 支持分组的头部组件。 支持分组的分隔线。 支持多种数据源结构 支持下拉刷新。 支持拉加载。...这个属性 iOS 是默认可用的,因为这是 iOS 的平台规范。

    3.1K10

    javascript如何实现类似西瓜视频的视频队列自动播放?

    这里有一个很常见的例子,平时喜欢看短视频的朋友可能会注意到,我们浏览某视频头条时,滚动视频列表,当某一个视频滚动到手机的一定位置时(一般可以看成是屏幕中心),该视频会自动播放,当移出指定区域后视频会自动关闭并播放移入指定区域的下一个视频...Observer提供的api来实现视频滚动的过程中自动播放的功能,如果对该api不太熟悉的朋友可以移步 几个非常有意思的javascript知识点总结 视频播放插件笔者将使用比较流行的Dplayer...因为我们使用的是Dplayer,所以我们只要将其配置属性中的mutex属性设置为true(为true时会阻止多个播放器同时播放,当前播放器播放时暂停其他播放器)。...有关设置rootMargin的知识,可以参考下图介绍: rootMargin接收格式如下:"10px 0px 10px 0px",从左到右数字依次代表top() right(右) bottom(下)...笔者将采用react来实现,实现之前我们先准备几个视频素材,然后实现列表基本框架: import React, { useEffect, useState } from 'react' import

    2.5K20

    使用Intersection Observer API实现视频队列自动播放

    这里有一个很常见的例子,平时喜欢看短视频的朋友可能会注意到,我们浏览某视频头条时,滚动视频列表,当某一个视频滚动到手机的一定位置时(一般可以看成是屏幕中心),该视频会自动播放,当移出指定区域后视频会自动关闭并播放移入指定区域的下一个视频...笔者接下来将直接利用Intersection Observer提供的api来实现视频滚动的过程中自动播放的功能,如果对该api不太熟悉的朋友可以移步 几个非常有意思的javascript知识点总结 视频播放插件笔者将使用比较流行的...因为我们使用的是Dplayer,所以我们只要将其配置属性中的mutex属性设置为true(为true时会阻止多个播放器同时播放,当前播放器播放时暂停其他播放器)。...rootMargin接收格式如下:"10px 0px 10px 0px",从左到右数字依次代表top() right(右) bottom(下) left(左)边距,当然我们单位也可以使用百分比(%),...笔者将采用react来实现,实现之前我们先准备几个视频素材,然后实现列表基本框架: import React, { useEffect, useState } from 'react' import

    1.4K20

    UIScrollView

    //11.如果这个属性被设置成YES而且bounces的值是YES,垂直拖动是允许的内容,即使小鱼滚动视图的边界,默认是NO @property(nonatomic) BOOL alwaysBounceVertical...知识用户是否已经开始滚动内容 @property(nonatomic,readonly,getter=isDragging) BOOL dragging; //25.返回的内容是否滚动视图后,用户接触他们的手指...) @property(nonatomic) UIEdgeInsets contentInset; 这个属性能够UIScrollView的4周增加额外的滚动区域,一般用来避免scrollView的内容被其他控件挡住...滚动,就会调用这个方法(监听scrollView滚动) */ - (void)scrollViewDidScroll:(UIScrollView *)scrollView { NSLog(...: 值改变事件(UISwitch、UISegmentControl、UISlider) UIControlEventEditingChanged : 文字改变事件(UITextField) 通过delegate

    1.8K60

    如何使用 SwiftUI 中 ScrollView滚动偏移

    前言WWDC 24 已经结束,我决定开始写一些关于 SwiftUI 框架即将推出的新特性的文章。今年,苹果继续填补空白,引入了对滚动位置更细粒度的控制。本周,我们将学习如何操作和读取滚动偏移。...它还提供重载,允许我们仅按 X 或 Y 轴滚动视图。...ScrollPosition 类型的 isPositionedByUser 属性允许我们了解何时用户手势移动滚动视图内容。...我们将这个偏移量存储 scrollOffset 状态属性中,并在视图底部显示当前的滚动位置。...我们介绍了如何使用 ScrollPosition 类型进行滚动位置的设置和读取,包括使用偏移量、视图标识符等方式进行操作。此外,我们还展示了如何通过动画和事件处理来增强用户体验。

    17610

    精读《深入了解现代浏览器四》

    "non-fast" 滚动区域 由于 js 代码可以绑定事件监听,而且事件监听中存在一种 preventDefault() 的 API 可以阻止事件的原生效果比如滚动,所以一个页面中,浏览器会对所有创建了此监听的区块标记为...如果阻止了就终止滚动,如果没有阻止才会继续滚动,如果最终结果是不阻止,但这个等待时间消耗是巨大的,低性能设备比如手机上,滚动延迟甚至有 10~100ms。...但就这件事 React 17 中有过一次讨论 Touch/Wheel Event Passiveness in React 17(实际在即将到来的 18 该问题还在讨论中 React 18 not...passive wheel / touch event listeners support),因为 React 可以直接在元素监听 Touch、Wheel 事件,但其实框架采用了委托的方式 document...首先背景是,React 16 事件委托绑定在 document React 17 事件委托绑定在 App 根节点,而根据 chrome 的优化,绑定在 document 的事件委托默认是 passive

    68810

    【IOS开发基础系列】UIScrollView专题

    1 UIScrollView原理        滚动过程当中,其实是修改原点坐标。当手指触摸后,scroll view会暂时拦截触摸事件,使用一个计时器。...为了达到这个目的,它临时中断了一个touch-down的事件,通过建立一个定时器,定时器开始行动之前,看是否触摸的手指做了任何的移动。...而前面所说的时,中断touch-down事件,和取消touch事件是俩码事,所以当快速子视图上移动的时候,当然可以滚动。...这里的例子是scrollView放置4个2排2列的视图,但是内存中只占用6个视图的内存空间。当scrollView滚动的时候,通过不停的重用之前视图的内存空间,从而达到节省内存的效果。...,这样就可以看到视图重用的效果了,应该是从0开始到无穷多,但是实际内存中就创建了6个视图。

    56330

    iOS滚动视图UIScrollView使用方法

    //设置滚动条指示器的类型,默认是白边界的黑色滚动条 self.scrollView.indicatorStyle = UIScrollViewIndicatorStyleDefault;...//还有UIScrollViewIndicatorStyleBlack、UIScrollViewIndicatorStyleWhite //设置是否只允许横向或纵向(YES)滚动,默认允许双向...[self.view addSubview:self.scrollView]; //创建两个label显示ScrollerView中,第二个要滚动才能看见...:(UIScrollView *)scrollView{ } 这里view中添加了一个设置了大小的ScrollViewScrollView中添加了两个Label,两个Label...的开始y值不同所以第一个一开始就能看见,而第二个要向下滚动才能看见,如图: 由于截图时间来不及所以第二张图看不到滚动条了,但是是滚动下来才能看得见: 基本方法代码中的注释已经讲的很清楚了,如果有不太清楚的可以自己试着调一下

    1.5K20

    基础篇章:React Native之 ScrollView 的讲解

    (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 编者按:其实我并不太喜欢在周末发公众号,毕竟大家都在休息和放松,不想学习,但是今天群里我看到有人说...on-drag 当拖拽开始的时候隐藏软键盘。 interactive 软键盘伴随拖拽操作同步地消失,并且如果往上滑动会恢复键盘。安卓设备不支持这个选项,会表现的和none一样。...onScroll function 滚动的过程中,每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。...ScrollView视图之外的视图(该视图的overflow属性值必须要为hidden)会从被暂时移除,该设置可以提高滚动的性能。...地址:[https://facebook.github.io/react-native/docs/scrollview.html] 我的秀丽身材 闻其声不见其人,光知道我,没见过我岂不是很out?

    1.9K50

    移动跨平台框架ReactNative滚动视图ScrollView【17】

    React Native 滚动视图 ScrollView 低头一族的我们,每天花大把大把的时间拉啊拉啊。...当屏幕的内容超过一屏时,我们很熟练的往上拉一点就可以看到剩下的内容了,这时候右边还会滚动条告诉我们这是可以往上拉的。 这看起来很简单的内容,并不是每个 React Native 组件天生都自带的。...例如下面的代码,我们一个 `` 中显示一组 语言 时,超过的部分就被截掉了。...ScrollView 滚动视图组件 `` 滚动视图组件,顾名思义,就是当内容超过指定的高度时会可以通过滑动来显示,右边还会显示滚动条。 `` 的使用很简单,只要包括在要滚动的组件外面就可以了。...例如上面那个范例,我们只需要做一点点的修改 App.js import React, { Component } from 'react'; import { Text, View, ScrollView

    1.4K20

    从 antDesign 来窥探移动端“滚动穿透”行为

    手册仅仅明确了,滚动事件的 Target 可以是 Document 以及里边的 Element ,当 Target 为 Document 时事件会发生冒泡,而 Target 为 Element 时并不会发生冒泡...移动端,我们完全可以使用一种通用的解决方案来解决上述造成“滚动穿透”意外行为: 无论元素是否可以滚动时,每次元素的拖拽事件触发时我们只需要进行判断: 寻找当前触发 touchMove 事件 event.target...如果在上述的范围内,祖先元素中不存在可滚动的元素,表示整个区域实际是不可滚动的。那么不需要触发任何父元素的意外滚动行为,直接进行 event.preventDefault() 阻止默认。...// 3.5 当 status 为 01 时(对应 3.2 滚动顶部),此时当用户从下往上拖动时,需要阻止意外的滚动行为发生。否则,则不需要阻止正常滚动。...passive chrome51 版本后出现的,本质是为了通过被动侦听器提高滚动性能。

    52520

    这一次,彻底解决滚动穿透

    什么是滚动穿透 如图所示,有一层遮罩蒙层覆盖body时,当我们滚动遮罩层,它下面的内容也会跟着一起滚动,看起来好像是上面的滚动事件穿透到下面的DOM元素一样,我们称之为滚动穿透。...阻止冒泡? 刚开始遇到这个问题的同学可能会联想到是不是由于事件冒泡到body引起的,于是监听 scroll/touchmove事件阻止事件冒泡。 事实,这并没有什么卵用。...首先,一般而言滚动不是我们自己监听事件去改变元素的位置而实现的,当我们设置 overflow:scroll/auto时,实际是浏览器原生实现的滚动效果。...假如我们的浮层上真的需要滚动事件,就不能阻止这些元素的默认行为。 浮层上面的滚动元素?...正如一开始介绍穿透问题那样,当滑动超出边界时,一样会触发默认的滚动穿透。

    2.7K21

    iOS开发UIScrollView使用详解 原

    nonatomic,getter=isDirectionalLockEnabled) BOOL directionalLockEnabled; 设置是否锁定,这个属性很有意思,默认为NO,当设置为YES时,你的滚动视图只能同一时间一个方向上滚动...; 设置是否给子视图传递取消动作的消息(默认设置为YES,当scrollView触发事件的时候,其子视图不能触发,如果设置为NO,则子视图会继续触发事件) - (BOOL)touchesShouldBegin...;  视图已经开始滑动时触发的方法 - (void)scrollViewDidZoom:(UIScrollView *)scrollView; 视图已经开始缩放时触发的方法 - (void)scrollViewWillBeginDragging...:(UIScrollView *)scrollView; 视图开始拖动时触发的方法 - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView...*)scrollView; 视图快捷滚动回顶端开始动作时调用 疏漏之处 欢迎指正 专注技术,热爱生活,交流技术,也做朋友。

    1.6K30
    领券