平面列表滚动到带挂钩的索引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的更多信息，请参阅文档(

Answer 2

步骤1：为flatlist创建ref，例如参见下面的

     let myList = useRef();

步骤2：然后将ref添加到您的平面列表组件中，如

    <FlatList
    data = {data}
    ref={myList}
    renderItem = {YourComponent}
    initialScrollIndex={0}
    horizontal = {true}
    showsHorizontalScrollIndicator={false}
   />

步骤3然后滚动任何按钮点击或任何类似的事件上的平面列表

   myList.current.scrollToIndex({animated:true,index:0,viewPosition:0});

谢谢！希望它能帮助