开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

FlatList/ScrollView不能在Touchable之间滚动

FlatList和ScrollView是React Native中常用的组件，用于展示滚动的列表或内容。但是在Touchable组件（如TouchableOpacity、TouchableHighlight等）之间使用FlatList或ScrollView时，会出现无法滚动的问题。

这个问题的原因是Touchable组件会阻止滚动事件的传递，导致FlatList或ScrollView无法响应滚动操作。为了解决这个问题，可以使用以下两种方法之一：

使用TouchableWithoutFeedback组件：将Touchable组件替换为TouchableWithoutFeedback组件，它不会阻止滚动事件的传递。这样就可以在TouchableWithoutFeedback组件之间正常滚动FlatList或ScrollView。
使用TouchableOpacity或TouchableHighlight的onPress事件：在Touchable组件上添加onPress事件，并在事件处理函数中执行相应的操作。例如，可以在onPress事件中切换页面或执行其他逻辑。这样就可以在Touchable组件上点击时触发相应的操作，而不会影响FlatList或ScrollView的滚动。

需要注意的是，以上两种方法都是通过改变Touchable组件的使用方式来解决滚动问题，而不是直接修复FlatList或ScrollView的滚动功能。因此，在使用这些组件时，需要根据具体的需求和场景选择合适的解决方法。

关于React Native中的FlatList和ScrollView组件的详细介绍和使用方法，可以参考腾讯云的文档：

FlatList：https://cloud.tencent.com/document/product/269/45473
ScrollView：https://cloud.tencent.com/document/product/269/45474

相关搜索:Android - Scrollview不能在片段中滚动 FlatList滚动在ScrollView中不起作用 flutter scrollView不能在流中滚动 iOS: Programatic ScrollView不滚动(contentSize set)Python Kivy:不能在FloatLayout中滚动ScrollView React原生FlatList不滚动 React原生TextInput不能在ScrollView中滚动 Scrollview不滚动 Scrollview不滚动整个屏幕 ScrollView不能在ViewPager中滚动

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

纯滚动怎么理解_scrollview不滚动

本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight 　　scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分 scrollWidth...scroll属性大于client属性　　[注意]scrollHeight属性存在兼容性问题，chrome和safari浏览器中，scrollHeight包含padding-bottom；而IE和firefox不包含...元素未滚动时，scrollLeft的值为0，如果元素被水平滚动了，scrollLeft的值大于0，且表示元素左侧不可见内容的像素宽度　　当滚动条滚动到内容底部时，符合以下等式 scrollHeight...如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。...scroll的知识，基本上囊括了关于滚动现有的所有属性和方法。

1.9K2 0

uniapp 中 ScrollView 组件上拉分页不滚动到最顶部

介绍：在UniApp中，如果想要实现类似微信聊天页面的上拉加载更多历史聊天记录功能，每次上拉到顶部时，界面不会自动滚动到最顶部，而是停留在当前位置。...本指南将展示如何使用ScrollView组件实现这一功能。步骤：在scroll-view组件中绑定scroll-into-view属性，并设置为一个变量scrollViewIntoView。...this.list.push(item); } this.scrollViewIntoView = "view" + this.msgList[start - 1].id; // 设置当前滚动到的元素...（加载前最后一个元素） }}通过以上步骤，您可以实现在UniApp中使用ScrollView组件进行上拉加载更多历史记录时，界面不会滚动到最顶部，而是停留在当前位置。

4932 1

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

跑起来运行后发现的一个严重的问题是，如果Tab导航控件的内容区域存在ScrollView或者ListView时，无法滚动，只有最外层可以滚动，也就是手势滚动被拦截了？...寻找内层滚动容器，一开始是认为递归寻找可见的ScrollView实例(Android中界面控件是一种树形结构)，通过Hierarchy Viewer工具发现这三个都是可见的，随后对比三个ScrollView...剩下最后一个如何通知内层容器滚动呢？先卖个关子，在解决这个问题之前，我们先来了解下Android中的View事件是如何传递的。正所谓知己知彼，百战不殆，看看Android触摸事件类型有哪些？...回过头来讲外层滚动容器通知内层滚动，其实通知滚动相当于不拦截事件，那么就是重写 onInterceptTouchEvent方法并返回false。而这个方法会随着手势不断调用，这时候聪明的你想到了啥？...ScrollView未到顶部：不拦截，代码如下： @Override public boolean onInterceptTouchEvent(MotionEvent ev) {

4.8K7 0

webview 和 React Native 中吸顶效果实现

sticky 和 absolute 定位属性在 ios 上的表现不友好，在 scrollview 等视图容器组件内部滚动时候，可能存在抖动的问题，这样用户体验非常差。...scrollview 是一个滚动的容器组件，web 中并没有现成的 scrollview 组件，常见的 scrollview 组件主要存在小程序或者一些跨段解决方案中，比如 Taro 中的 Scrollview...RN 中有很多中实现吸顶的方式，ScrollView ，FlatList ，和 SectionList 都能实现吸顶效果， 3.1 ScrollView 和 FlatList ScrollView 和...FlatList 一般用于列表组件，两者中有一个stickyHeaderIndices 可以轻松实现吸顶效果。...<ScrollView stickyHeaderIndices={[0]}//第一个子元素即头部组件，上滑时吸顶 /> stickyHeaderIndices: 一个子视图下标的数组，用于决定哪些成员会在滚动之后固定在屏幕顶端

3K1 0

基础篇章：关于 React Native 之 Touchable 系列组件的讲解

Touchable前传 Touchable系列组件，为什么是系列组件呢，去看官方文档我们知道，文档导航组件介绍中，有四个关于Touchable的组件，分别是：TouchableHighlight ，TouchableNativeFeedback...只要视图不能滚动，你可以来回多次这样的操作。确保你传入一个常量来减少内存分配。我说了该组件官网说了，不建议使用，因为没有反馈效果，所以常用的是其他三种，而且都是继承自它。...在底层实现上，实际会创建一个新的视图到视图层级中，如果使用的方法不正确，有时候会导致一些不希望出现的视觉效果出现。比如没有给视图的backgroundColor显式声明一个不透明的颜色。...activeOpacity number 设置封装的视图在被触摸操作激活时用多少不透明度显示（通常在0到1之间）。...效果图如下： TouchableOpacity 关于TouchableOpacity的例子，我们在上篇ScrollView中用到过了，现在讲讲概念。

1.6K9 0

基础篇章：关于 React Native 之 Touchable 系列组件的讲解

Touchable前传 Touchable系列组件，为什么是系列组件呢，去看官方文档我们知道，文档导航组件介绍中，有四个关于Touchable的组件，分别是：TouchableHighlight ，TouchableNativeFeedback...只要视图不能滚动，你可以来回多次这样的操作。确保你传入一个常量来减少内存分配。我说了该组件官网说了，不建议使用，因为没有反馈效果，所以常用的是其他三种，而且都是继承自它。...在底层实现上，实际会创建一个新的视图到视图层级中，如果使用的方法不正确，有时候会导致一些不希望出现的视觉效果出现。比如没有给视图的backgroundColor显式声明一个不透明的颜色。...activeOpacity number 设置封装的视图在被触摸操作激活时用多少不透明度显示（通常在0到1之间）。...效果图如下： TouchableOpacity 关于TouchableOpacity的例子，我们在上篇ScrollView中用到过了，现在讲讲概念。

2K9 0

React Native组件之VirtualizedList

React Native（简称RN）列表是基于ScrollView实现的，也就是可以滚动的，然而RN并没有直接使用IOS或Android的原生列表组件，这是因为RN真正调用native代码的过程是异步的...在早期版本中，对于列表情况RN采用的是ListView组件，和Android一样，早期的ListView组件性能是非常的差的，在后来的版本中，RN提供了系列用于提高列表组件性能的组件：FlatList和...FlatList和SectionList都是基于VirtualizedList实现的。...一般来说，FlatList和SectionList已经能够满足常见的开发需求，仅当想获得比FlatList 更高的灵活性（比如说在使用 immutable data 而不是普通数组）的时候，才会应该考虑使用

1.4K2 0

React Native性能优化：应该做和不应该做的

下面的例子就是在ScrollView组件的onScroll事件中使用useNativeDriver <ScrollView showsVerticalScrollIndicator={false}...渲染一个大列表数据有一些方法可以在React Native中使用滚动列表。...其中两种最常用的方式就是使用ScrollView和FlatList组件 ScrollView用起来很简单，通常用于使用JavaScript的map()函数遍历一个数组。...为了解决渲染大量数据的情况，React Native提供了一个FlatList组件。...这个组件能够懒加载子组件列表，这样APP就不会消耗大量的内存例如： <FlatList data={elements} keyExtractor={item => `${items.id}`}

4K3 0

React Native跨平台开发2017 年终总结

0.43 通用：FlatList 正式发布；通用：样式支持 alignContent 属性；通用：init 项目时的模板可以自定义了。...React Native上的复选框组件，(目前仅支持Android，未来会支持iOS) ImageBackground：背景图片组件，它是一个容器组件，支持包含其他组件 VirtualizedList：FlatList...FlatList：基于VirtualizedList的高性能简单列表组件。...SwipeableFlatList：一个带滑动显示更多菜单的FlatList组件； SectionList：基于VirtualizedList的高性能分组(section)列表组件。...代替此地图组件； RecyclerViewBackedScrollView：现在直接通过ScrollView即可解决滚动冲突； AdSupportIOS：使用react-native-deprecated-modules

2.5K7 0

🤯 没 2 年 React Native 开发经验，你都遇不到这些坑

[5] 6.ScrollView ScrollView 组件是 RN 提供的滑动容器组件，有几个比较冷门但是很好用的 API 我这里说明一下。...第一个是吸顶功能，涉及到 StickyHeaderComponent 和 stickyHeaderIndices 这两个 API，可以实现滚动吸顶的效果，非常的好用。...7.FlatList FlatList 主要是注意 3 个点： FlatList 提供自定义的头部/底部/空白/分割线组件，比一般的 Web 组件封装更彻底一些 React 渲染列表的时候会要求加 key...以提高 diff 性能，但是 FlatList 封装的比较多，需要用 `keyExtractor`[6] 这个 API 来指定列表 Cell 的 key FlatList 性能优化的内容官网写的不是很好...借用这个库就能在 APP 本地生成图片，转而实现海报功能。

4.1K2 0

React Native列表之FlatList开发实用教程

ReactClass 行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。 ListFooterComponent?: ?...: object) 滚动到底部。如果不设置getItemLayout属性的话，可能会比较卡。...scrollToIndex(params: object) 滚动到指定位置，如果不设置getItemLayout属性的话，可能会比较卡。...如果不设置getItemLayout属性的话只能滚动到当前渲染窗口的某个位置。 scrollToOffset(params: object) 滚动到列表中的特定内容像素偏移量。...如果不指定此属性，则FlatList不会触发更新，因为它是一个PureComponent，其props在===比较中没有变化则不会触发更新。

6.4K0 0

react-native-easy-app 详解与使用之（三） View，Text，Image，Flatlist

重新封装了RN的View、Text、Image、FlatList 使用得这些控件在适当的时候支持事件或支持icon与文本，能有效减少布局中的嵌套逻辑。 4....X系列组件的使用使得这三个基本组件支持onPress事件，实现原理很简单，若传入的属性中包含onPress方法，则返回一个由Touchable系列组件（默认为：TouchableOpacity）包裹的组件...不用担心内层包装已经做了处理，将传入的属性和样式做了拆分，属于Text的属性和样式会传给Text，剩下的再传给外层的View 复杂UI（XFLatList） 1、下拉刷新与分页支持下拉刷新，滚动到底部加载更多数据是很常见的应用场景...，但原生的Flatlist并不支持，故对原生Flatlist进行了一下简单封装，并支持以下状态： static RefreshStatus = { Idle: {},//idle status...] [flatlist_loading_more.png] [flatlist_loading_network_exception.png] XFlatList data生Flatlist几乎一样，原生属性也都支持

2.2K1 0

React Native 性能优化指南

用处还是很广的，比如说自己业务上封装的 React 组件，React Native 官方封装的组件（比如说 ScrollView or Touchable* 组件），活用这个属性，可以减少你的 View...比如说下面的动图，在屏幕中上下滚动时，y 轴上的偏移可以通过 ScrollView#onScroll 属性开启 useNativeDrive: true 来优化滚动体验。...1、各种列表间的关系 React Native 有好几个列表组件，先简单介绍一下： ScrollView：会把视图里的所有 View 渲染，直接对接 Native 的滚动列表 VirtualizedList...：虚拟列表核心文件，使用 ScrollView，长列表优化配置项主要是控制它 FlatList：使用 VirtualizedList，实现了一行多列的功能，大部分功能都是 VirtualizedList...这个属性 VirtualizedList 没有做任何优化，是直接透传给 ScrollView 的。在 0.59 版本的一次 ?

5.2K20 0

如何在React Native中使用FlatList组件

{ FlatList } from 'react-native';使用FlatList组件在导入FlatList组件之后，可以直接在render()函数中使用FlatList组件。...onEndReached：当用户滚动到列表底部时调用的函数。refreshing：一个布尔值，用于指定列表是否正在刷新。onRefresh：当用户下拉列表时调用的函数。...ItemSeparatorComponent：一个组件，用于在列表项之间渲染分隔线。ListEmptyComponent：一个组件，用于在列表为空时渲染。...React Native中的FlatList组件是一个非常实用的组件，可以轻松实现列表的展示和滚动，且能够支持大量数据的高效渲染和懒加载，提高了用户体验。...React Native的FlatList组件提供了一个名为onEndReached的属性，该属性接受一个函数作为参数，当用户滚动到列表底部时就会触发该函数。

3750 0

React Native按钮详解|Touchable系列组件使用详解

ScrollView很类似。...onPress function 当触摸操作结束时调用，但如果被取消了则不调用（譬如响应者被一个滚动操作取代）。...心得：disabled也是Touchable系列组件的最常用的属性之一，通常用于禁止按钮相应用户的点击事件，比如，当用户单击按钮进行登录时，需要进行网络请求，在请求操作完成之前如果用户多次单击登录按钮我们通常不希望发起多次登录请求...心得：有朋友问我，想禁用按钮，但是通过设置Touchable的accessible 属性为false没有效果，这也是因为即使accessible为false的情况下，Touchable组件还是可以响应交互事件的...，要想禁用Touchable的交互事件，只能通过disabled属性。

4.1K7 0

RN项目第二节 -- 首页实现

模块之间会有分割线，可以将分割线也封装成组件。.../widget/Text' 在render方法中返回FlatList并设置它的属性 render() { return ( <FlatList data={this.state.dataList} //请求的数据...}, searchIcon: { width: 20, height: 20, margin: 5, } 封装头部头部分为2个部分，一个是滚动的部分...(props) { super(props) this.state = { currentPage: 0 } } 实现滚动的方法

6.5K3 0

react native简单入门

componentWillReceiveProps、componentWillUpdate、componentDidUpdate 有条件的执行：componentWillUnmount（页面离开，组件销毁时）不执行的...常用属性如下：（此组件与TouchableHighlight的区别在于并没有额外的颜色变化，更适于一般场景） activeOpacity 指定封装的视图在被触摸操作激活时以多少不透明度显示（通常在0到1之间...Modal ScrollView horizontal 当此属性为true的时候，所有的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。...showsHorizontalScrollIndicator 当此属性为true的时候，显示一个水平方向的滚动条。...FlatList data 数据 renderItem 每一项的渲染组件 onEndReached 当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用 onEndReachedThreshold

3.5K1 0

JDReact小程序双向转换工具介绍

我们不希望转化之后的程序在这种情况下报错，我们对这种表达式进行了容错，react-native（预计0.56版本）支持optional-chaining之后，我们也会跟进用optional-chaining...要想让小程序认识FlatList，我们需要在小程序端实现一个小程序版的FlatList，好在发展到今天，小程序的自定义组件已经很完善。...明显的，小程序的每一个组件都可以响应事件，而RN的组件一般只是Touchable** 系列的组件响应事件。...都可以通过元素在小程序wxml文件中的文档结构来进行计算匹配，我们通过抽象语法树的方式解析wxml文件，为每个元素注入了它自身在文档结构中的信息，来进行选择器的计算适配，目前已经提供了近10种最常用的选择器类型，且功能在不断的完善与扩展...在RN端，小程序的scroll-view是可以上下左右滚动的，而RN的只可以一个方向，事件处理的差异等等。对于所有的这些限制和约束，我们后续会给出一份完整的清单，同时也会给出相应的替换方案。

2.3K2 0

React Native学习笔记（三）—— 样式、布局与核心组件

和SafeAreaView ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。...ScrollView不仅可以垂直滚动（默认），还能水平滚动（通过horizontal属性来设置）。...滚动加载。...Animated侧重于输入和输出之间的声明性关系，以及两者之间的可配置变换，此外还提供了简单的 start/stop方法来控制基于时间的动画执行。...Animated侧重于输入和输出之间的声明性关系，以及两者之间的可配置变换，此外还提供了简单的 start/stop方法来控制基于时间的动画执行。

13.6K3 1

给Android开发者Flutter上手指南

ScrollView在Flutter中等价于什么？谁是Flutter的列表组件？如何知道点击了列表中哪个item？如何动态更新ListView？...ScrollView在Flutter中等价于什么？在Android中，ScrollView允许您包含一个子控件，以便在用户设备的屏幕比控件内容小的情况下，使它们可以滚动。...但在Flutter中，一个ListView既是一个ScrollView，也是一个Android ListView。...在 iOS 中，你给 view 包裹上 ScrollView 来允许用户在需要时滚动你的内容。在 Flutter 中，最简单的方法是使用 ListView widget。...UITableView 或 UICollectionView 来展示一个列表；在 Android 中，通常用 ListView 或 RecyclerView 来展示一个列表；在 RN 中，通常用 FlatList

2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭