如何滚动到 FlatList 中单击列表项的索引

Question

我有一个反应本机 FlatList，当单击该列表中的项目时，我希望页面滚动到该列表项目的顶部（因此项目的顶部现在位于page/screen)。我一直在使用 scrollToIndex。我向 renderItem 添加了一个 onPress，它调用了一个函数“onClickItem”。我已将 scrollToIndex 放入该函数中，并传入了被单击项目的索引。虽然这不起作用。请问我哪里错了？

 import React from 'react';
 import { View, FlatList, StyleSheet} from 'react-native';
 import { NavigationEvents } from 'react-navigation';
 import SwipeableCard from './SwipeableCard';

   
  class Tab extends React.Component {

    constructor(props) {
     super(props)

   this.state = {
     currentTab: null,
     records: [],            
     selectedRecords: [],     
     pageOffset: 0,
     pageSize: 10,      
     searchQuery: null,
   }
    this.listRef = null
    this.searchRef = null
  }
    
  renderTabItem = ({ item, index }) => 
   <SwipeableCard    
     onPress={ () => this.onClickItem(item, index)}     
   />

  onClickItem(item, index){
   this.listRef.scrollToIndex({index})              
 }


render() {
  return (
    <>         
    <FlatList 
      ref={ref => this.listRef = ref}
      style={{ paddingTop: 8 }}
      initialNumToRender={this.state.pageSize}
      data={this.state.records}
      onEndReachedThreshold={0}
      onEndReached={this.loadMore}
      keyExtractor={item => item.isNew ? 'new' : item.id}
      renderItem={this.renderTabItem}          
    />      
   </>      
  )
 }

  export default withTheme(Tab);

Answer 1

您目前看到的行为是什么？有没有错误？

我首先要看的是 SwipeableCard class。将 onPress 作为道具放在那里并不常见，因为它要求您在 SwipeableCard class 中有一个名为 onPress 的道具。相反，您应该用 TouchableOpacity 或 Pressable 包装 SwipeableCard，并将 onPress 函数放在那里。

如果不是这样，您需要向我展示更多您的代码。

如何滚动到 FlatList 中单击列表项的索引

How to scroll to index of clicked list item in FlatList

react-native

scrolltoindex

flatlist