Question

我正在尝试使用React Hooks和scrollToIndex方法滚动到我的列表中间数据，但是我无法对其进行引用。我通过使用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

要访问当前渲染的参考，您需要使用.current-因此，请使用refContainer.current：

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

        }    
    },[status])

另外，这样设置您的裁判：

<FlatList ref={refContainer} ...

（有关.current的更多信息，请参见docs）

Answer 2

第 1 步：为 flatlist 创建 ref，例如见下文，

     let myList = useRef();

第 2 步：然后像这样将 ref 添加到您的 flatlist 组件

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

第 3 步然后在任何按钮单击或任何类似下面的事件上滚动平面列表

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

谢谢！希望有帮助

Answer 3

const flatListRef = useRef();

    <FlatList
        ref={flatListRef}
        onContentSizeChange={() => flatListRef?.current?.scrollToEnd()} // scroll end
        data={myChats}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item, index }) => <View/>}
    />

带有钩子的平面清单scrollToIndex useRef

3 个答案: