ScrollView位置将在子组件重新呈现（更新）时重新启动

Question

bounty到期在7天内。这个问题的答案有资格获得+ 50声望赏金。halbano希望引起更多关注对此问题：

我希望收到一个想法，将逻辑简单地放在自定义滚动视图逻辑中，而不是复杂的逻辑来处理单元格的状态变化。

我遇到了一个问题（在渲染周期中可能忽略了这一点），在更新其子组件的某些组件时，它们保持两个不同的滚动视图的位置。

我有一个类似的视图层次结构：

<ScrollView vertical scrolling ability>
    ...
    <ScrollView horizontal and vertical scrolling ability>
    ...
        <Matrix>
            <Cell updateCellStatusHandler={handler}>
        </Matrix>
    ...
    </ScrollView>
</ScrollView>

因此，内部单元格上的更新正在重置单元格状态更新上的两个滚动，这产生了一种超级怪异的体验，用户必须向下/向左/向右滚动以继续与状态为I的单元格矩阵进行交互有。

我试图使用useState保存scrollOffset（x，y），但是如果我更改某些单元格，则状态会重置为（0,0），这是我的初始状态。

const [scrollOffset, setScrollOffset] = useState({
    scrollX: 0,
    scrollY: 0,
})

但是没有运气。

<ScrollView
      {...props}
      scrollEventThrottle={16}
      ref={scrollReference}
      // tslint:disable-next-line: jsx-no-lambda
      onScroll={event => {
        setScrollOffset({
          scrollX: event.nativeEvent.contentOffset.x,
          scrollY: event.nativeEvent.contentOffset.y,
        })
      }}
      onScrollEndDrag={event => {
        console.log(event.nativeEvent.contentOffset.y)
        console.log(event.nativeEvent.contentOffset.x)
      }}
    >
      {props.children}
</ScrollView>

解决此问题的一种可能方法是拥有一种机制，允许我在更新之前保存滚动位置。但这会使组件之间的通信复杂化很多，等等。顺便说一下，单元状态更新是通过Redux处理的。

如果你们中的一些人能对此有所了解，那就太好了。

谢谢。

Answer 1

我认为保存scrollview的滚动位置的总体思路很好。

我认为您的状态重置为0的事实可能是由于Redux（但是不确定，您能否确定组件如何连接到redux？）。我对Hooks不太熟悉，但是在React Class组件中，我会尝试将滚动位置保存在该类的非state属性中。也许将其保存在功能组件之外的变量中？

然后在用于处理单元格更新的处理程序中，可以确保滚动视图滚动到保存的位置（使用ScrollView.scrollTo()，并带有{animated: false}选项，以便用户看不到动画）