reactjs - Flatlist scrollToIndex with Hooks useRef

Question

我试图使用 React Hooks 和方法 scrollToIndex 滚动到我的数据在 flatlist 的中间，但我无法引用它。我使用类似 ref={component => (this.list = component)} 的类实现了这一点，但我可以通过 useRef 实现。

const refContainer = useRef(null); 

useEffect(()=>{   
        if(refContainer){
            refContainer.scrollToIndex({ animated: true, index: 0 });

        }    
    },[status])

<FlatList
                ref={()=>refContainer}
                refreshing={loading}
                onRefresh={() => console.log('refreshing')}
                keyExtractor={(item, index) => item.date}
                showsVerticalScrollIndicator={false}
                style={{flex: 1,}}
                data={kits}    
                onEndThreshold={0}
                renderItem={({item, index}) => renderItem(item, index)}   

            />

向我显示错误:refContainer.scrollToINdex 不是函数。

Answer 1

要访问当前渲染的 ref，您需要使用 .current - 所以在你的情况下，使用 refContainer.current :

useEffect(()=>{   
        if(refContainer.current){
            refContainer.current.scrollToIndex({ animated: true, index: 0 });

        }    
    },[status])

另外，像这样设置你的引用:

<FlatList ref={refContainer} ...

(有关 .current 的更多信息，请参阅 docs)