React native 使用Flatlist将本机滚动到顶部

我有很多麻烦滚动到我的平面列表的顶部，所以任何帮助将不胜感激

从本质上讲，它从firebase获取前5项，然后在调用ONEDREACHED时，我们将接下来的5项附加到列表中：

data: [...this.state.data, ...results]

目前，我在视图顶部有一个刷新按钮，它执行以下操作：

this.flatListRef.scrollToOffset({ animated: true, y: 0 });

如果在呈现前5项时单击此按钮，它将按预期滚动到列表顶部。该问题仅在列表被附加到后发生（我猜这些项目不在视图中？）

我也尝试过“ScrollToItem”，但我猜这不起作用，因为React原生文档中有以下内容：

注意：如果没有渲染，则无法滚动到渲染窗口之外的位置 指定getItemLayout属性

有人能解释发生了什么，或者知道我做错了什么吗

提前谢谢你

getItemLayout：（不完全确定这是做什么的，或者如何计算长度和偏移量等）

getItemLayout=（数据，索引）=>(
{长度：50，偏移量：50*索引，索引}
)
返回(
{this.flatListRef=ref；}}
onScroll={this.handleScroll}
data={this.state.data}
keyExtractor={item=>item.key}
ListFooterComponent={this.renderFooter（）}
onRefresh={this.handleRefresh}
刷新={this.state.newRefresh}
onEndReached={this.handleEndRefresh}
onEndReachedThreshold={0.05}
getItemLayout={this.getItemLayout}
renderItem={this.renderItem}
/>
{this.state.refreshAvailable？this.renderRefreshButton（）：null}
);

正确的语法是

this.flatListRef.scrollToOffset({ animated: true, offset: 0 });

你也可以使用

---

为了防止有人对如何使用钩子执行此操作感到迷茫，下面是一个示例

function MyComponent() {
    const flatListRef = React.useRef()

    const toTop = () => {
        // use current
        flatListRef.current.scrollToOffset({ animated: true, offset: 0 })
    }

    return (    
        <FlatList
            ref={flatListRef}
            data={...}
            ...
        />
    )
}

函数MyComponent（）{
const flatListRef=React.useRef（）
常数toTop=（）=>{
//使用电流
flatListRef.current.scrollToOffset（{动画：true，偏移量：0}）
}
报税表（
)
}

---

主要区别在于，如果有人想知道如何使用React钩子，您可以通过

.current

访问它：

import React，{useRef}来自“React”

声明它->

const flatListRef=useRef（）

将其设置为

ref={flatListRef}

像

flatListRef.current.scrollToOffset（{animated:false，offset:yourOffset}）那样调用它。

---

抱歉，这么长时间了，但我想把这个标记为正确答案。它以前不工作，所以可能是旧版本中的一个bug，但现在我在v0.57上，它工作得很好。如何使用动画平面列表来实现这一点？我既看不到

scrollToOffset

也看不到

scrollToIndex

function MyComponent() {
    const flatListRef = React.useRef()

    const toTop = () => {
        // use current
        flatListRef.current.scrollToOffset({ animated: true, offset: 0 })
    }

    return (    
        <FlatList
            ref={flatListRef}
            data={...}
            ...
        />
    )
}