React-Native 使用 Flatlist 滚动到顶部

Question

我在滚动到我的平面列表顶部时遇到了很多麻烦，所以任何帮助都将不胜感激！

本质上，它从 firebase 中获取前 5 项，然后当调用 onEndReached 时，我们会在 append 中获取列表中的下 5 项：

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

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

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

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

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

注意：如果不指定 getItemLayout 属性，则无法滚动到渲染 window 之外的位置。

谁能解释发生了什么或知道我做错了什么？

先感谢您！

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 });

你也可以使用

滚动到索引

Answer 2

以防万一有人不知道如何使用钩子来做到这一点，这里有一个例子

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

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

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

主要区别在于您通过.current访问它

Answer 3

滚动到我的Flatlist的顶部时遇到很多麻烦，因此不胜感激！

本质上，它从firebase中获取前5个项目，然后在调用onEndReached时，我们将后5个项目追加到列表中：

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

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

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

如果在渲染前5个项目时单击此按钮，它将按预期滚动到列表的顶部。 仅在将列表附加到列表后才会发生此问题（我想这些项目不在视图范围内？）。

我也尝试过'ScrollToItem'，但是由于React Native文档中的以下原因，我猜想这是行不通的：

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

谁能解释正在发生的事情或知道我做错了什么？

先感谢您！

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 4

反应钩

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

Answer 5

在这个答案中，我提到了一个非常简单的代码片段，其中有 2 个按钮可以向右或向左滚动平面列表。<\/strong> 您可以使用此代码来实现以编程方式滚动平面列表的其他用例。<\/strong>

//import
import React, { useEffect, useState, useRef, useCallback } from 'react';

//React class declaration.
const DocumentsInfo = ({ route, navigation }) => {
  
  //state variable
  const [documentsArray, setDocumentsArray] = useState({}); // array being shown in flatlist.
  const [maxVisibleIndex, setMaxVisibleIndex] = useState(0); // highest visible index currently visible.
  const [minVisibleIndex, setMinVisibleIndex] = useState(0); // lowest visible index currently visible.
  const flatListRef = useRef() // reference of flatlist.

  // callback for whenever flatlist scrolls
  const _onViewableItemsChanged = useCallback(({ viewableItems, changed }) => {
     setMaxVisibleIndex(viewableItems[viewableItems.length - 1].index);
     setMinVisibleIndex(viewableItems[0].index);
  }, []);

  // function for scrolling to top
  const scrollToTop = () => { 
    setMinVisibleIndex(0);
    setMaxVisibleIndex(0);
    flatListRef.current.scrollToIndex({ index: 0, animated: true });
  };

  // function for scrolling to bottom
  const scrollToBottom = () => { 
    let temp = documentsArray.length - 1;
    setMinVisibleIndex(temp);
    setMaxVisibleIndex(temp);
    flatListRef.current.scrollToIndex({ index: temp, animated: true });
  };

  // function for moving flatlist left and right by 1 index
  const moveNextPreviousHorizontalFlatlist = (isNext) => {
     if (isNext) {
        let maxVisible = maxVisibleIndex + 1;
        if (maxVisible < documentsArray.length) {
           let minVisible = minVisibleIndex + 1;
           setMinVisibleIndex(minVisible);
           setMaxVisibleIndex(maxVisible);
           flatListRef.current.scrollToIndex({ index: maxVisible, animated: true });
        }
     }
     else {
        let minVisible = minVisibleIndex - 1;
        if (minVisible >= 0) {
           let maxVisible = maxVisibleIndex - 1;
           setMinVisibleIndex(minVisible);
           setMaxVisibleIndex(maxVisible);
           flatListRef.current.scrollToIndex({ index: minVisible, animated: true });
        }
      }
   };

   // UI 
   return (
       <View>
       { maxVisibleIndex != documentsArray.length - 1 &&
          <View style={styles.Refresh}>
            <TouchableOpacity onPress={() =>
               moveNextPreviousHorizontalFlatlist(true)
            }>
             <Image style={styles.Refresh} source={Refresh} />
            </TouchableOpacity>
           </View>
       }

       <FlatList
         ref={flatListRef}
         onViewableItemsChanged={_onViewableItemsChanged}
         showsHorizontalScrollIndicator={false}
         horizontal
         keyExtractor={(item, index) => item.fileName + index}
         data={documentsArray}
         renderItem={({ item, index }) => {
           return (  <DocumentListItem /> )
         }}
       />

       { minVisibleIndex != 0 &&
         <View style={styles.Refresh}>
           <TouchableOpacity onPress={() =>
              moveNextPreviousHorizontalFlatlist(false)
            }>
             <Image style={styles.Refresh} source={Refresh} />
           </TouchableOpacity>
         </View>
       }
     </View>
     );

Answer 6

下面的方法解决了我的问题。 一探究竟：

const flatList = useRef();
const moveToTop = () => flatList.current.scrollToIndex({ index: 0 });

return (
  <View>
    <FlatList
      ref={flatList}
      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>
);

如何在 ReactNative 应用程序中将滚动添加到 FlatList 的顶部