ListView控件始終滾動回到頂部反應母語

我使用react-native的iOS移動應用，在那裏我使用ListView顯示報警的列表。我創建了自己的可重用列表視圖組件，名爲ComponentListView，其中我可以傳入要在每一行中呈現的組件以及列表視圖的數據。如果我有很多警報，並且最終滾動查看警報，它總是滾動回頂部（請參閱下面的示例應用程序，以顯示症狀），因此我無法最終操作警報。我想這可能是與我是如何創建的ComponentListView組成部分，因爲如果我只是用一個簡單的ListView組件，它按預期工作，但我需要使用ComponentListView成分，因爲我有很多不同的屏幕上，我要顯示一個列表與不同的組件，它簡化了我的工作。ListView控件始終滾動回到頂部反應母語

我在rnplay上創建了一個示例應用程序，它顯示了這些症狀。請在iOS上運行。這裏AlarmList使用ComponentListView來顯示報警列表，並且AlarmSummary是顯示在每行中的組件。

Sample app on rnplay

我嘗試使用在ComponentListView的渲染方法的一些控制檯日誌語句來檢查組件是否得到一次又一次的重新渲染上滾動來調試，但似乎並不成爲案件。我也嘗試在Chrome調試器中進行調試，但我有點不知所措，不確定如何調試。

請讓我知道你是否有任何指示來解決問題。

來源

2016-05-15 Varun Gupta

給flex: 1屬性爲sceneContainer也一樣：

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

在這裏工作：https://rnplay.org/apps/TL9N9g

來源

2016-05-15 07:30:38 Cherniv

謝謝您的回答解決了問題，但我還是不明白，怎麼完全沒有'彎曲：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>

來源

2017-02-05 22:57:06 Tope

ListView控件始終滾動回到頂部反應母語

回答

相關問題