ListView 总是在 react-native 中滚动回到顶部

Question

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

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

Sample app on rnplay

我尝试使用 ComponentListView 的渲染方法中的一些控制台日志语句对其进行调试，以检查组件是否在滚动时一次又一次地重新渲染，但情况似乎并非如此。我也尝试在 Chrome 调试器中进行调试，但我有点没有想法并且不确定 how/where 是否可以调试。

如果您有任何解决问题的建议，请告诉我。

Answer 1

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

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

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

Answer 2

为简单起见：您需要设置 ListView 本身的高度或使用显式 "height" 值设置 container/parent 元素的高度或者通过在样式中设置 "flex"。

<View style={{flex:1}}>
   <ListView />
</View>

<View>
   <ListView style={{height:300}} />
</View>

ListView 总是在 react-native 中滚动回到顶部

ListView always scrolls back to the top in react-native

react-native

react-native-listview