React Native VirtualizedList 获取滚动并滚动到位置

Question

所以我在RN 49.3上，我正在寻找一种方法来获取虚拟化列表中可见的项目的滚动位置或索引！

PS：当我打开VirtualizedList的源代码时.js它似乎有props.onScrollEndDrag&props.onScroll

Answer 1

我们使用的是不同的方法。从那以后，它发生了很大变化，但我可以帮助您进行初始方法。我们将onScroll参数添加到列表中。我们将event.nativeEvent.contentOffset.y捕获到状态或规范中的某个变量中。我们使用了 redux。当用户离开屏幕时，我们将此值保存在数据库中。第二部分是从 componentDidMount 中的 db 加载此值。您只需将ref放入列表组件，然后调用this.refs.myRef.scrollTo({ x: 0, y: loadedValue, animated: false });

捕获滚动

    render() {
      return (
        <VirtualizedList 
            ref='myRef'
            onScroll={event => {
                this.scroll = event.nativeEvent.contentOffset.y;
            }}
            ...
        />
    );}

退出时保存

componentWillUnmount() {
    AsyncStorage.setItem(key, this.scroll);
}

安装后加载

componentDidMount() {
    AsyncStorage.getItem(key)
        .then(y => {
            this.refs.myRef.scrollTo({ x: 0, y, animated: false });
        });
} 

我认为最好的方法是在 redux 中处理它，然后将此组件与列表连接到商店。我提到保存到 db 中，因为我们确实保存了位置以供以后使用，这只是可选的，取决于您的要求。您也可以使用该状态，但是您需要处理不必要的更新