如何在FlatList中获取项目的偏移位置？
在FlatList中获取项目的偏移位置可以通过使用FlatList组件提供的scrollToOffset方法来实现。该方法接受一个参数offset，表示要滚动到的偏移位置。
具体步骤如下：
- 首先，确保你已经引入了FlatList组件，并正确配置了数据源和渲染项。
- 在FlatList组件中添加一个ref属性，用于获取对该组件的引用。例如：ref={(ref) => { this.flatListRef = ref; }}
- 在需要获取偏移位置的地方，通过this.flatListRef.scrollToOffset({ offset: 0, animated: true });来滚动到指定位置。这里的offset可以根据你的需求进行调整。
- 如果你想获取当前的偏移位置，可以使用this.flatListRef.scrollToOffset({ offset: 0, animated: false });来滚动到0位置，然后通过this.flatListRef._listRef._scrollMetrics.offset来获取当前的偏移位置。
需要注意的是，以上方法是基于React Native中的FlatList组件实现的，如果你使用的是其他框架或库，可能会有不同的实现方式。
FlatList是腾讯云提供的一种用于高效渲染大型列表数据的组件，适用于展示长列表、聊天记录、商品列表等场景。你可以通过腾讯云的云开发平台来构建和部署React Native应用，并使用FlatList组件来实现列表的展示和滚动功能。具体的产品介绍和文档可以参考腾讯云云开发的官方网站：https://cloud.tencent.com/product/tcb
相关·内容
嘿，我有一个带卡片的FlatList。我想要实现这一局面。
设想情况：
例如，在Flatlist中滚动5个项目时，我希望显示反馈卡，而不是项目卡。
如何才能实现这一点？
浏览 15提问于2022-04-19得票数 0
回答已采纳
我不能将我的复选框设置为alignSelf: 'flex-end'或right: 0。
我想把复选框的顶部和右边，但有奇怪的填充在照片上。我尝试了许多不同的风格，但都没有效果。:(
这是FlatList的renderItem()
<TouchableWithoutFeedback
style={{flex:1}}
onPress={() => this._handleImagePress(item.id, item.outfit_img)}>
<View style={{flex: 1}}>
浏览 3提问于2017-10-30得票数 0
回答已采纳
我对react native中的FlatList组件有一点小问题。FlatList中的项目具有不同的高度。下面是我所拥有的一个小示例：
第一个问题是所有项目都位于顶部。我想把所有的东西都放在底部。
第二个问题是FlatList的高度总是最大项的高度。所以你也可以滚动到一个小项目的白色区域中的另一个项目...
下面是我的代码：
import React from "react";
import {
Text,
View,
Dimensions,
StyleSheet,
ListView,
TouchableOpacity,
浏览 1提问于2017-12-03得票数 0
1回答
请看下面的video我正在努力实现，我有一个屏幕与数据和其他项目的多个平面列表，我希望每个标题坚持通过用户滚动通过不同的部分。我试过使用React Native flatlist附带的stickyheaders道具，但这只适用于一个flatlist，我正在寻找一个能处理多个粘性标题的解决方案。 谢谢
浏览 24提问于2021-04-20得票数 1
回答已采纳
我试图通过点击一些项目来重命名FlatList中的项目，但这对我不起作用，当我点击每个项目时，什么都没有发生，也没有得到任何错误。我该如何解决这个问题呢？ 这是我的代码。 export default function renameSample() {
const data = [
{
id: '1',
name: 'test1',
},
{
id: '2',
name: 'test2',
},
{
id: '3
浏览 4提问于2020-07-12得票数 1
回答已采纳
我用平板表来显示数据，作为回应，我得到了一些数据。
但是，json响应字符串是以{}大括号开始的，而不是从[]括号开始的。
因此，在错误之下：
不变违规:尝试获取超出范围的索引Nan的帧。
做完日志后，我在我的dataSource of FlatList is [Object Object]中得到了什么
我在postman和它的类似项中检查了json响应：{{[[]}}，简而言之，它不以[]括号开头。
因此，我在这里有点困惑，即FlatList必须有以[]括号开头的dataSource或json响应。
如果没有，那么错误会有什么问题呢？如果是，我如何以所需的格式转换它？
谢谢。
编辑
这样做：
浏览 2提问于2018-08-01得票数 0
回答已采纳
1回答
如何确定要在FlatList renderItem支柱中使用的项的高度，以便计算在无限滚动实现的每一页中包含在其data支柱中的项的数量？
像这样使用ref是行不通的。onLayout也不会触发这个函数。
const renderItem = ({ item }) => (
<Card ref={cardRef}>
...
</Card>
);
<FlatList
data={items}
renderItem={renderItem}
/>
浏览 3提问于2022-09-28得票数 0
下面是我尝试使用setInterval函数设置变量的方法，content将每秒钟更改一次，我发现onMomentumScrollEnd可以在滚动FlatList时得到y的位置
然后我被卡住了，我想event.nativeEvent.contentOffset.y = this.state.content;可以让我的FlatList自动滚动。显然不是。
有人能给我一些建议吗？提前谢谢。
我的数据来自API，这里是我的App.js：
import React from 'react';
import { View, Image, FlatList, Dimensions } fro
浏览 3提问于2018-04-26得票数 1
回答已采纳
我想在ScrollView组件中创建一个FlatList，但一直收到错误消息"VirtualizedLists永远不应该嵌套在具有相同方向的普通ScrollViews中，因为它会破坏窗口和其他功能--请使用另一个由VirtualizedList支持的容器。“这将我引向了文章。我能够修改我的代码到下面这一点，但我不确定如何修改this.refs.myList.scrollProperties.offset以适合我的代码。这是尝试将FlatList放入ScrollView的最好方法，还是有更好的方法？
const [enableScrollViewScroll, setEnableScro
浏览 6提问于2021-06-25得票数 0
我有一个像这样的FlatList设置
<FlatList
style={styles.listContainer}
data={this._formatList()}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
ItemSeparatorComponent={this.renderSeparator}
nestedScrollEnabled
showsVerticalScrollIndicator={false}
extraData={this.state}
ref={th
浏览 2提问于2019-08-19得票数 0
回答已采纳
1回答
我正试图在一个FlatList中制作一个以react为母语的动画。
平表
--------
item1
--------
item2
--------
item3
--------
一旦我按下item2，FlatList就会如下所示：
--------
item1
--------
empty
--------
item3
在FlatList的顶部(从空空间开始)，item2将扩展到全屏高度，不允许item1和item3在列表中移动。
有没有人知道是否可以使用react本地的方法来完成这一任务？
我已经在zIndex中使用绝对定位进行了尝试，但是似乎没有什么效果。
这是我的Flat
浏览 2提问于2017-10-19得票数 1
回答已采纳
1回答
在我的代码反汇编中有这样的内容：
我看到了跳转指令代码E9，但是E9后的数字是如何转换成内存地址的呢？
浏览 0提问于2019-04-09得票数 1
回答已采纳
const DATA = [
{
car_name: 'Ford',
model_number: '2021 . 68 - 1647',
full_tank: false,
suggestion: [
{
price: '$2.50',
type: 'Oil Top up',
description: 'Max 1 litre o
浏览 1提问于2022-06-09得票数 1
我需要一个关于如何构建一个与FlatList反应方式相同的组件的建议。或者，也许有一个现成的工具来对JS做出反应。下面是我的react的简单FlatList：
<FlatList
data={this.props.list_data}
horizontal={false}
renderItem={this.renderItemList}
keyExtractor={(item, index) => index.toString() }
浏览 1提问于2019-07-08得票数 0
回答已采纳
5回答
我们有一个包含许多项的ListBox。项目通过ObservableCollection插入到ListBox中。其中一些项目可以直接在ListBox中进行编辑。但是，如果在索引<已编辑项目的索引处添加项目，则ListBox的整个内容将下移。
我们想要做的是:如果一个项目处于编辑模式，我们希望冻结它在屏幕上的位置。如果将项添加到集合中，并且项周围的UI发生更改，则没有问题。但是项目在屏幕上的位置应该保持不变。
到目前为止，我唯一能做的就是附加到ScrollChanged事件，最多使用BringIntoView或ScrollIntoView方法来确保该项始终显示在UI中的某个位置，但我无法锁定
浏览 2提问于2010-03-12得票数 10
1回答
我正在使用Angular 8+和超文本标记语言的拖放功能。简而言之，当我拖动可拖动的div时，我希望鼠标光标始终位于被拖动的浮动div的左上角，无论我在div中拖动到哪里。下面是我希望光标所在位置的屏幕截图。 这可以在Angular/Javascript中实现吗？我有下面的stackblitz链接：https://stackblitz.com/edit/angular-envxg7?file=src/app/app.component.html 非常感谢你提前 ? <div draggable="true" style="width:300px;heig
浏览 27提问于2020-01-18得票数 0
1回答
我正在创建一个移动应用程序，在那里我想列出我的联系人和他们的电话号码。我正在使用世博会联系人和扁平列表组件，在那里我想显示联系人姓名和电话号码。 所以，问题是我不知道如何将电话号码添加到扁平列表组件中。 const [ contact, setContact ] = useState([])
const getContacts = async () => {
const { status } = await Contacts.requestPermissionsAsync()
if (status === 'granted') {
c
浏览 26提问于2020-10-11得票数 0
如果我将item的值保存在一个名为item1的变量中，该变量位于react-native的FlatList的renderItem属性中，那么FlatList的行为就会很奇怪。它总是打印列表的最后一个元素，而不是打印我选择的元素
import React, { Component } from 'react';
import { FlatList } from "react-native";
import {
ListItem,
Text,
View,
} from 'native-base';
export default clas
浏览 2提问于2019-07-28得票数 0
我有多个关于FlatList的问题，我无法通过阅读文档来回答。 什么时候需要使用listKey，什么时候使用keyExtractor？有时，当我有兄弟FlatLists时，我必须在每个列表中指定listKey，如下所示： renderItem = (item, index) => (<View key={item.id} />)
<FlatList
keyExtractor={({id}) => id}
listKey="MusicList"
render
浏览 73提问于2020-08-28得票数 3
回答已采纳
以下是我的方法：
public function listVersionsForPath($s3Path, $bucketName, $offset, $limit) {
$versions = array();
$tmpS3Path = $this->cleanS3Path($s3Path);
$fullBucketName = self::getFullBucketName($bucketName);
$request = array(
'Bucket' => $fullBucketName,
浏览 1提问于2015-04-10得票数 2
回答已采纳
我有一个ListView，我想找到一个特定项目的偏移量，这样以后我就可以把它放在listView上，滚动到相应的垂直偏移量。
到目前为止，我还没有找到检索ScrollViewer中项的位置(偏移)的方法。
浏览 2提问于2015-10-09得票数 3
回答已采纳
1回答
是否可以在ListView中设置固定(粘滞)的标题行，但我希望它的行为如下图所示：
所以，当它没有滚动时，我想要显示“大”的标题，但当用户向下滚动足够多时，标题应该转到限制值(标题行高度的50%或类似的值)…我试着使用这个库：
但是我没有成功地实现这个行为。可以使整个(全高)标题行固定，但不能固定其中的一半或一部分。
浏览 1提问于2014-12-19得票数 0
2回答
需要高级搜索过滤器-反应本机
、、、、
我有一个SearchBar和一个简单的FlatList。我的搜索过滤器逻辑工作得很好，但是对于简单的搜索来说很好。
示例:如果我的FlatList有三项
探视时间。
他知道探视时间。
拜访和时间。
在我的SearchBar中，如果我搜索“访问h"，它将只呈现项目2 -> 2。他知道访问时间。
当我搜索“访问h"时，我希望它呈现所有3个条目--我的搜索过滤器应该查找每一个包含”访问“和"h”的项目。它还应包括“访问”中的“访问”。
如何捕获这种类型的过滤器？有任何js库可以使用吗？有什么有效的方法来执行这个搜索过滤器吗？
我的当前代码如下：
ex
浏览 3提问于2020-04-19得票数 1
2回答
<FlatList
numColumns={2}
data={items}
renderItem={() => (
<Item />
)
}
/>
我正在尝试根据前四个项目是否在视图中隐藏/显示另一个组件。
为了做到这一点，我必须首先弄清楚某个元素是否在视图中。
浏览 1提问于2019-09-06得票数 0
在react原生中，FlatList和ScrollView的结构有什么不同？
对于应用程序中的滚动视图，它们似乎是相等的，但是ScrollView非常简单，而不是FlatList，那么当我们必须在代码中使用FlatList时呢？
浏览 3提问于2019-03-20得票数 35
回答已采纳
我有一个FlatList评论的不同高度的，我需要实现滚动到特定的元素时，打开这个FlatList的模式。
由于某种原因，如果我将onEndReached放入ScrollToIndex中，则会多次调用方法ComponentDidMount。有什么解决办法可以滚动到列表的具体元素吗？
scrollToOffset，initialScroll不是一个选择，因为我有不同的高度。
尝试使用此提示和
如果我再次点击按钮，它可以正常工作，但对于第一次打开，位置略有不同，就像它没有时间滚动什么的。
render() {
const { comments } = this.props;
re
浏览 3提问于2020-02-07得票数 0
1回答
您知道哪种方法是从查询中获取结果块的最佳方法吗？
1.Cursor
q = Person.all()
last_cursor = memcache.get('person_cursor')
if last_cursor:
q.with_cursor(last_cursor)
people = q.fetch(100)
cursor = q.cursor()
memcache.set('person_cursor', cursor)
2.Offset
q = Person.all()
offset = memcache.get('offset
浏览 2提问于2010-08-25得票数 20
回答已采纳
2回答
为什么FlatList不工作？ 我试图通过FlatList从我的应用程序接口和视图中获取数据，但它不起作用。我可以在控制台中看到这些值，但在FlatList中看不到。 **Home Page**
import React, { Component } from 'react'
import {Text,TouchableOpacity,View,FlatList} from 'react-native'
import { connect } from 'react-redux'
//import {VIEWDATA } from &
浏览 27提问于2020-07-18得票数 1
回答已采纳
在呈现一些数据后，如何在React中添加分隔符-原生FlatList？
我已经试过使用React本机SectionList，但是我不能像在FlatList中那样添加fetchNext函数。
这是我目前的代码
<FlatList
data={data}
keyExtractor={keyExtractor}
renderItem={renderItem}
fetchNext={fetchNextPage}
numColumns={2}
ItemSeparatorComponent={<View style={this.separatorStyles} />
浏览 3提问于2019-05-16得票数 0
回答已采纳
下面的代码要循环遍历数组。
export default function App() {
const [x, setX] = useState([
{name:'a'},{name:'b'}
]);
return (
<View >
<FlatList
data={x}
renderItem={(item) => {
return <Text>{item.name}</Text>;
}}
/&g
浏览 2提问于2020-09-13得票数 0
回答已采纳
我有一个flatList，里面有物品。在我向下滚动了一点之后，一个项目被添加到了顶部。这会导致列表向下移动一个单元格。我怎样才能避免这种情况？
浏览 10提问于2018-01-09得票数 2
我有一个呈现x个TouchableHighlight的FlatList组件。我需要在FlatList中的所有组件垂直对齐到中心。
问题是，如果我把justifyContent: center放在contentContainerStyle中，什么都不会发生，但是，如果我把flex: 1加到contentContainerStyle中，我会得到我想要的结果。如果我不需要滚动，这是很酷的，但是当我在FlatList中有许多组件时，强制滚动来查看所有的滚动，滚动开始于这些列表的中心，而不是让我滚动。
以下是我的代码：
<FlatList
style = {{flex: 0.7,
浏览 0提问于2018-05-10得票数 13
回答已采纳
我正在用React Native制作一个聊天应用程序，在我的应用程序中，我有一个显示消息的Flatlist。当用户拉取列表时，它将获得新数据并添加到列表中。但是列表将被重新渲染并滚动到start item。有没有办法让它仍然获得数据，但保持在当前位置，就像Facebook Messenger一样？我像这样使用FlatList：
<FlatList
refreshControl={
<RefreshControl
浏览 26提问于2018-07-23得票数 1
我是新的反应本地人，我是跟随一个教程。我使用FlatList来呈现组件。这是我的组成部分：
const HomeScreen = (props) => {
console.log("articles: ", props.articles);
return (
<View>
<FlatList
data={ props.articles }
renderItem={({item}) => <Text> {item.title}</Text>}
浏览 1提问于2021-05-07得票数 1
这是一个常见的问题，但不知怎的，我已经尝试了我能找到的所有解决方案，但仍然收到了这个警告。
VirtualizedList: You have a large list that is slow to update - make sure your renderItem
function renders components that follow React performance best practices like
PureComponent, shouldComponentUpdate, etc. {"contentLength": 5200, "dt&#
浏览 20提问于2022-09-23得票数 0
1回答
我正在尝试使用Offset参数获取所有项目的数据。我有大约4500个数据。使用PHP cURL代码检索所有项(REST API)。
但是如何使用offset参数和最大限制500呢？
浏览 0提问于2014-09-26得票数 0
我正在使用新的，并希望在生命周期方法(如componentDidMount )中使用ScrollToIndex (或ScrollToEnd)。
我有一个数组，比方说100项，我不想在第一项开始渲染，而是在开始。比方说在第50条。当FlatList一次只显示一个项目时，它会按需要工作，并进行一些黑客操作，如下所述：
componentDidMount() {
let wait = new Promise((resolve) => setTimeout(resolve, 500)); // Smaller number should work
wait.then( () =>
浏览 5提问于2017-05-08得票数 6
回答已采纳
这是我们的FlatList，打个招呼：
<FlatList
data={this.state.dates}
...
/>
我们给它提供以下日期：
this.state = {
dates: [
'21/06/2019',
'22/06/2019',
'23/06/2019',
]
};
然后，当可见日期更改(onViewableItemsChanged)时，如果我们结束为第一项(21/06/2019)，我们将数据放在前面，以便新的状态变为：
dates: [
浏览 1提问于2019-06-21得票数 14
所有人
我正在尝试在我的oracle APEX应用程序的每个页面中添加一个项目。由于我的应用程序中有许多页面，为了方便起见，我创建了一个全局页面，并添加了一个在其中创建项目的区域。虽然，这可以满足我在每个页面中添加一个页面项的要求，但它会导致在每个页面中显示不必要的区域。
我还尝试在“共享组件”中创建一个项目插件，并尝试在Global Page中添加该插件。但是，当我尝试添加一个" plug-in“类型的region时，apex告诉我没有安装插件。为什么？
有没有办法在全局页中添加页面项目而不添加不必要的区域？如果不可能，有没有其他方法可以将页面项目添加到应用程序中的每个页面，而不必手
浏览 13提问于2014-07-14得票数 1
回答已采纳
2回答
我有一个面板，其中键盘总是打开，因为我不希望用户拒绝它。在该面板中，我有一个FlatList，它如下所示：
<KeyboardAvoidingView style={{ flex: 1 }}>
<FlatList
// This keeps the keyboard up and disables the user's ability to hide it.
keyboardShouldPersistTaps="handled"
data={this.state.examples}
浏览 0提问于2019-03-05得票数 7
回答已采纳
我在火柴基地有两张桌子。我正在获取数据并将其存储在用户和CATES状态中。现在，当我在两个独立的 FlatList中列出数据时，我的两个FlatList给了我单独的滚动。但我只想在整页上滚动一次。请帮帮忙。谢谢
{/* **FlatList 1***/}
<View style={{ backgroundColor: '#fff', marginVertical: 10, borderRadius: 6, paddingBottom: 10 }}>
<Text style={{ fontWeight: 'bold', color:
浏览 3提问于2021-06-29得票数 0
回答已采纳
新的反应本地人。以下是我要做的事：
呈现一个包含三个组件的页面:顶部面板、中间行和内容框。当用户向下滚动时，会滚动并消失顶部面板，中间一行被滚动但粘到屏幕顶部，内容框一直滚动到内容的末尾。
下面的代码符合我的意图。然而，当我使用这段代码时，我会收到关于嵌套虚拟化视图的警告。
return (
<View style={style.profileContainer}>
<ScrollView
stickyHeaderIndices={[1]}
showsVerticalScrollIndicator={false}
浏览 2提问于2020-10-11得票数 0
1回答
我有一个应用程序从服务器加载流量报告，并将其显示在一个时间线(如twitter)中，该应用程序被配置为每10秒使用以下代码从服务器加载数据：
@Override
public void onResume() {
super.onResume();
autoUpdate = new Timer();
autoUpdate.schedule(new TimerTask() {
@Override
public void run() {
ru
浏览 2提问于2013-10-22得票数 0
回答已采纳
我有一个FlatList，我正在实现一个自定义的pull来刷新，这个想法是将它滚动到一个负的偏移量，在释放时显示它下面的动画。这是我的FlatList的代码。
const flatListRef = useRef(null);
const handleRelease = () => {
flatlistRef.current.scrollToOffset({ y: -100 });
setTimeout(() => {
flatlistRef.current.scrollToOffset({ y: 0 });
}, 1000)
}
ret
浏览 0提问于2020-03-27得票数 3
我在我的活动中使用android列表视图...
现在，我需要获取从列表中选择的项目的名称...
下面是我创建菜单的代码
public void onCreateContextMenu(ContextMenu menu, View v,ContextMenuInfo menuInfo) {
super.onCreateContextMenu(menu, v, menuInfo);
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.activity_main,
浏览 0提问于2013-02-10得票数 2
回答已采纳
我制作了一个CustomScrollView小部件，它包含：
SliverAppBar
SliverPersistentHeader
SliverGrid
SliverPersistentHeader
SliverGrid
SliverPersistentHeader将是SliverGrid中项的描述，一旦它点击(我用GestureDetector包装它)，我希望滚动偏移量在SliverPersistentHeader所在的中间位置发生变化。
怎么做？ScrollController似乎只知道滚动范围，到目前为止，我还没有看到ScrollView中有任何属性( CustomScrollView
浏览 3提问于2021-05-16得票数 5
我已经创建了cardView，但是如何将它转换为<FlatList/>，我无法理解什么是renderItem of FlatList？
我现在的代码是：
<ScrollView style={styles.container}>
<View style={styles.cardView}>
<Text style={styles.projectName}>{marketing_updates.length != 0 ? marketing_updates[0].project
浏览 1提问于2018-10-01得票数 1
回答已采纳
2回答
我使用jquery的scrollTop函数，不知道为什么在同一项上多次调用时它会跳来跳去。
我把这个放在一起来说明这个问题。当单击“测试”按钮时，它会在滚动到指定的项和列表中的另一个位置之间交替进行。
$('#button').click(function () {
$('.items').scrollTop($('li.8').offset().top); // scroll to item 8
});
.items{
max-height: 80px;
overflow: auto;
}
<script src=&
浏览 4提问于2015-10-13得票数 1
回答已采纳
我想检测在FlatList屏幕上显示的是什么项目，在经过2秒的聚焦后，在该项目中呈现一个渐进式视图。(类似于instagram上的评论)
换句话说，我想在显示在屏幕上的2秒后，向PostItem呈现一个增量视图。我尝试在setTimeout中添加useEfect以使该组件可见。但是，PostItem中的FlatList和所有列表都是并发呈现的，2秒后所有PostItems都有这个组件。
有什么解决办法吗？如果解决方案是在onViewableItemsChanged中使用FlatList，那么如何用这个支柱来实现呢？
下面是我的FlatList组件：
const _renderItem: Li
浏览 10提问于2022-01-04得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
