在React Native应用程序中,FlatList是一个常用的列表渲染组件,用于展示大量数据。为了方便用户交互,滚动到指定选项的功能非常实用。本文将介绍几种在React Native FlatList中滚动到指定选项的方法。 二、方法详解 1. 使用ScrollToIndex方法 ScrollToIndex方法允许你将FlatList滚动到指定索引位置。可以通过FlatList的_scrollTo...
接着上一篇 使用react-native-tab-navigator切换页面 当前首页页面内容是空的，只有一个背景色。下面...
滚动必须调用到 flatlist 的scrollToIndex的方法,this._tableview.scrollToIndex({animated: true, index: cellIndex, viewPosition: 0});, viewPosition 为0表示让他的上部与顶部持平. 输入结束后,获取到onEndEdit,再让他滚动到居中的位置,避免最后一行的空白问题.this._tableview.scrollToIndex({animated: true, ...
在过去的一年中React Native经历了从v0.40到v0.52的十几次的版本迭代,可以看到,特别是0.50之后,React Native的组件库在不断地壮大,React Native也正在越来越稳定。 随着版本的升级,React Native引进了一些新的组件中,如FlatList、SectionList等具有更高性能的列表组件,也有与时俱进的用于适配全屏幕的SafeAreaView组件,...
You need to bind your function to be able to refer to the correct context Do it like _enableTVEventHandler = () => {this._tvEventHandler = new TVEventHandler();this._tvEventHandler.enable(this, function(cmp, evt) {this.myFlatList.scrollToIndex({viewPosition:0.5, index:2}); ...
FlatList高性能的简单列表组件,支持下面这些常用的功能: 完全跨平台。 支持水平布局模式。 行组件显示或隐藏时可配置回调事件。 支持单独的头部组件。 支持单独的尾部组件。 支持自定义行间分隔线。 支持下拉刷新。 支持上拉加载。 支持跳转到指定行(ScrollToIndex)。
解决 可以把列表上方所需的组件做成header属性传入组件当做flatlist的头部组件，这样就可以直 ...
支持跳转到指定行(ScrollToIndex)。 如果需要分组/类/区(section),请使用<SectionList>. 一个最简单的例子: <FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) =><Text>{item.key}</Text>} /> 下面是一个较复杂的例子,其中演示了如何利用PureComponent来进一步优化性能和减少 bug 产...
我们看下scrollToIndex的效果: SectionList 广告 深入浅出React Native(异步图书出品) 京东 ¥68.50 去购买 SectionList组件 和FlatList一样,都是列表组件,而且两者都是基于 VirtualizedList 进行封装的,不同的是SectionList有一个分组(section)的功能,类似于通讯录的功能,它支持下面功能: ...
this.flatListRef.scrollToOffset({animated:true,y: 0 }); 如果我在呈现前 5 个项目时单击它,它会按预期滚动到列表顶部。仅在将列表附加到后才会出现此问题(我猜这些项目不在视图中?)。 我也尝试过“ScrollToItem”,但我猜这不起作用,因为 React Native 文档中的以下内容: ...