我該如何解決錯誤？ : node.scrollTo 不是 function

Question

當我在 TodoItem 組件中運行 onPress 時，我希望執行 scrollTo 並向下滾動 y: height value

但如果我運行 onPress

node.scrollTo 不是 function << 發生此錯誤

這是我的代碼

(TodoList.js)

    import React, {useContext, useState, useEffect, createRef} from 'react';
    import {FlatList} from 'react-native';
    import {
      Dimensions,
      NativeSyntheticEvent,
      NativeScrollEvent,
      ScrollView,
    } from 'react-native';

    const TodoList = ({replycomment}) => {


      const height = Dimensions.get('window').height;
      const [tabIndex, setTabIndex] = useState(0);
      const flatListRef = React.useRef()
      const refScrollView = createRef();
    
      return (
        
        <FlatList
        ref={refScrollView}
          style={{height}}
          contentOffset={{x: 0, y: height}}
          renderItem={({item}) => (
            <TodoItem
            onPress={() => {
              const node = refScrollView.current;
              if (node) {
                node.scrollTo({x:0, y: height, animated: true});
              }
            }}
            />
          )}
        />

(TodoItem.js)

        import React, { useCallback, useState } from 'react';
        import {FlatList} from 'react-native';


        const TodoItem = ({onPress}) => {


        return (
            
        
        <MainContainer onPress={onPress}>
            <Label>hi</Label>
        </MainContainer>

我不確定為什么會發生這個錯誤。 我該如何修復我的代碼？ 我想使用平面列表

Answer 1

從FlatList的Github源代碼中，我只能看到 4 種有助於滾動功能的方法：-

scrollToEnd(params?: ?{animated?: ?boolean, ...})

scrollToIndex(params: {
    animated?: ?boolean,
    index: number,
    viewOffset?: number,
    viewPosition?: number,
    ...
  })

scrollToItem(params: {
    animated?: ?boolean,
    item: ItemT,
    viewPosition?: number,
    ...
  })

scrollToOffset(params: {animated?: ?boolean, offset: number, ...}) 

我認為您需要使用上述任何一種（因為FlatList沒有實現它自己的scrollTo ）。 我可以看到由FlatList內部返回的VirtualizedList中的scrollTo用法。

鏈接到源代碼 - https://github.com/facebook/react-native/blob/master/Libraries/Lists/FlatList.js

Answer 2

你可以嘗試使用這樣的東西：

node.scrollIntoView({ 行為：'smooth'，塊：'start' })