ListView控件始终滚动回到顶部反应母语

问题描述：

我使用react-native的iOS移动应用，在那里我使用ListView显示报警的列表。我创建了自己的可重用列表视图组件，名为ComponentListView，其中我可以传入要在每一行中呈现的组件以及列表视图的数据。如果我有很多警报，并且最终滚动查看警报，它总是滚动回顶部（请参阅下面的示例应用程序，以显示症状），因此我无法最终操作警报。我想这可能是与我是如何创建的ComponentListView组成部分，因为如果我只是用一个简单的ListView组件，它按预期工作，但我需要使用ComponentListView成分，因为我有很多不同的屏幕上，我要显示一个列表与不同的组件，它简化了我的工作。ListView控件始终滚动回到顶部反应母语

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

Sample app on rnplay

我尝试使用在ComponentListView的渲染方法的一些控制台日志语句来检查组件是否得到一次又一次的重新渲染上滚动来调试，但似乎并不成为案件。我也尝试在Chrome调试器中进行调试，但我有点不知所措，不确定如何调试。

请让我知道你是否有任何指示来解决问题。

答

给flex: 1属性为sceneContainer也一样：

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

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

谢谢您的回答解决了问题，但我还是不明白，怎么完全没有'弯曲：1'造成滚动无法正常工作。我明白'flex：1'将允许容器使用所有可用空间。如果我没有'flex：1'，它只会使用所需的空间。是因为没有'flex：1'导致容器超出界限，因此实际上不需要滚动？如果你有更多的见解，你是否介意了解它？ –

@VarunGupta，from docs：*为了限制ScrollView的高度，可以直接设置视图的高度（不鼓励）或确保所有父视图的高度有界。忘记将{flex：1}传递给视图堆栈可能会导致错误，元素检查器可以很容易地进行调试。*，link：http://facebook.github.io/react-native/releases/0.25/docs /scrollview.html#content – Cherniv

明白了，谢谢！ –

答

对于简单清晰：你需要设置ListView控件本身的高度OR设定的高度容器/父元素使用明确的“高度”值或在样式中设置“flex”。

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

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

ListView控件始终滚动回到顶部反应母语

相关推荐