react-native 在 ScrollView 中保持滚动条更新列表答案

【问题标题】：react-native keep scrollbar in the ScrollView After to update a listreact-native 在 ScrollView 中保持滚动条更新列表
【发布时间】：2023-01-20 17:28:18
【问题描述】：

我在可滚动视图中有一个包含一些数据的列表。标签 ----- 复选框

如果用户单击该复选框，该按钮将更新我的减速器并刷新列表以显示该复选框是否被选中。

我的问题与滚动条有关，每次单击后我的滚动条都会在我的视图顶部初始化。

我找到了解决方案，但是......这不好

let scrollY = 0
function FiltersScreen(props) {
    return (
      <View style={{height: "90%", padding: 10}}>
          <ScrollView style={{flexDirection: 'column', paddingRight: 5}}
                      ref={ScrollViewRef}
                      onContentSizeChange={(contentWidth, contentHeight) => {
                          crollViewRef.current.scrollTo({
                              y: scrollY,
                              animated: false,
                          });
                      }}
            // keep the scrollbar position
                      onScroll={event => scrollY = event.nativeEvent.contentOffset.y}
                      onScrollEndDrag={event => scrollY = event.nativeEvent.contentOffset.y}

          >
              // content
          </ScrollView>
      </View>
    )
}

可以不刷新滚动条吗？

谢谢你的帮助。

【问题讨论】：

标签： react-native

【解决方案1】：

我觉得您的 FiltersScreen 视图是另一个视图中的子视图（让我们调用 MotherView）。当 MotherView 重新渲染时，FiltersScreen 视图也会重新渲染。

它使您的滚动视图重新初始化。当 MotherView 通过以下方式重新呈现时，您应该防止在 FiltersScreen 视图上重新呈现：

将 FiltersScreen 视图拆分到其他文件并

export React.memo(FiltersScreen);

然后导入您的 FiltersScreen View 并添加到 MotherView。

React.memo 将防止在子视图中不使用道具时在子视图中重新渲染。

【讨论】：