Question

我在滚动到我的Flatlist顶部时遇到了很多麻烦，所以任何帮助都会非常感激！

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

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

现在，我的视图顶部有一个刷新按钮，可执行以下操作：

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

如果在渲染前5个项目时单击此项，则会按预期滚动到列表顶部。只有在附加列表后才会出现此问题（我猜这些项目是关闭视图的？）。

我也试过'ScrollToItem'但是我猜这是不行的，因为来自React Native docs的以下内容：

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

任何人都可以解释发生了什么或知道我做错了什么吗？

提前谢谢！

getItemLayout :(不完全确定这是做什么或如何计算长度和偏移等）

getItemLayout = (data, index) => (
{ length: 50, offset: 50 * index, index }
)

return (
  <View>
    <FlatList
      ref={(ref) => { this.flatListRef = ref; }}
      onScroll={this.handleScroll}
      data={this.state.data}
      keyExtractor={item => item.key}
      ListFooterComponent={this.renderFooter()}
      onRefresh={this.handleRefresh}
      refreshing={this.state.newRefresh}
      onEndReached={this.handleEndRefresh}
      onEndReachedThreshold={0.05}
      getItemLayout={this.getItemLayout}
      renderItem={this.renderItem}
    />
    {this.state.refreshAvailable ? this.renderRefreshButton() : null}
  </View>
);

Answer 1

正确的语法是

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

，您也可以使用

scrollToIndex

Answer 2

如果有人想知道如何使用 React 钩子：

import React, {useRef} from 'react'
声明 -> const flatListRef = useRef()
将其设置为 ref={flatListRef}
称之为flatListRef.current.scrollToOffset({animated: false, offset: yourOffset})

Answer 3

以防万一有人迷上了如何使用钩子做到这一点，这是一个示例

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

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

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

主要区别在于您可以通过.current

进行访问

React-Native使用Flatlist

3 个答案: