ListView始终在react-native中滚动回到顶部 [英] ListView always scrolls back to the top in react-native

问题描述

我将react-native用于iOS移动应用程序，其中使用ListView显示警报列表.我创建了自己的可重复使用的列表视图组件，称为ComponentListView，可以在其中传递要在每一行中呈现的组件以及列表视图的数据.如果我有很多警报，并且我向下滚动以查看警报的末尾，它总是会滚动回到顶部(请在下面的rnplay上查看带有症状的示例应用程序)，因此最终我无法对警报进行操作.我认为这可能与我创建ComponentListView组件的方式有关，因为如果我只使用一个简单的ListView组件，它会按预期工作，但是我需要使用ComponentListView组件，因为我有许多不同的屏幕，我必须显示一个列表，其中包含不同的组件，这简化了我的工作.

I am using react-native for a iOS mobile app where I am using ListView to display a list of alarms. I have created my own reusable list view component called ComponentListView in which I can pass in the component that I want to render in each row and the data for the list view. If I have a lot of alarms and I scroll down to see the alarms in the end, it always scrolls back to the top (please see sample app below on rnplay with symptoms) and hence I can't operate on the alarms in the end. I think it may have something to do with how I have created the ComponentListView component because if I just use a simple ListView component, it works as expected but I need to use ComponentListView component since I have many different screens where I have to display a list with different component and it simplifies my work.

我在rnplay上创建了一个示例应用程序，该应用程序显示了这些症状.请在iOS上运行.在这里AlarmList使用ComponentListView来显示警报列表，而AlarmSummary是在每一行中显示的组件.

I have created a sample app on rnplay which shows these symptoms. Please run on iOS. Here AlarmList is using ComponentListView to show a list of alarms and AlarmSummary is the component displayed in each row.

在rnplay上采样应用

我尝试在ComponentListView的render方法中使用一些控制台日志语句来调试它，以检查是否在滚动时一次又一次地重新渲染该组件，但事实并非如此.我也尝试在Chrome调试器中进行调试，但是我有点主意，不确定如何/在何处调试.

I try to debug it using some console log statements in the render method of the ComponentListView to check if the component is getting re-rendered again and again on scrolling but that doesn't seem to be the case. I also tried to debug in Chrome debugger but I am kind of out of ideas and not sure how/where to debug.

请让我知道您是否有解决问题的指针.

Please let me know if you have any pointers to solve the problem.

推荐答案

还将flex: 1属性也赋予sceneContainer，例如:

Give flex: 1 attribute to the sceneContainer also, like:

sceneContainer: {
  flex: 1,
  marginTop: 60
},

在这里工作: https://rnplay.org/apps/TL9N9g

这篇关于ListView始终在react-native中滚动回到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！