0

我有一个 react native FlatList，当单击该列表中的一个项目时，我希望页面滚动到该列表项的顶部（因此该项目的顶部现在位于页面/屏幕的顶部）。我一直在使用 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);
4

1 回答 1

0

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

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

如果不是这种情况，您需要向我展示更多代码。

于 2021-06-18T17:43:00.477 回答