2016-05-31 108 views
0

這就是說有一個很長的ScrollView有很多內容,並且頁面底部還有另一個組件。當用戶向下滾動時,我試圖懶惰地渲染底部組件。有沒有圖書館實施了這個?React Native:如何確定組件是否在視圖端口

(我知道ListView的onEndReached的,但並不完全知道這有助於這種情況下)。

感激,如果任何人都可以引導我方向。

+0

我不完全清楚你的惰性渲染,但是實現特定組件的滾動視圖只能擁有選定組件滾動的特性,而最後或底部組件保持靜態而不用scrollview標籤封裝它。 –

+0

例如,在底部有一個註釋組件的長篇文章組件。如果用戶只瀏覽文章並且根本不滾動,則不需要獲取評論並進行呈現。當用戶滾動靠近底部時,僅提取評論將是有效的。 –

+0

不使用react-native的ListView組件的任何原因? – Jickson

回答

1

把它放在ScrollView的末尾?

ScrollViews默認情況下做到這一點:

removeClippedSubviews布爾

實驗:如果爲true,屏幕外的子視圖(其溢出值是隱藏的)從它們原來的後盾上海華被刪除屏幕之外時。這可以提高長列表的滾動性能。默認值是true。

https://facebook.github.io/react-native/docs/scrollview.html#removeclippedsubviews

+0

這是一個很好的!我嘗試了一下,但看起來組件仍然被渲染,「ComponentDidMount」中的請求仍然被調用。 –

1

我創建一個簡單的LIB此:

https://github.com/chunghe/react-native-defer-renderer

基本上你可以得到滾動從onScroll事件ScrollViewe.nativeEvent.contentOffset)的位置,通過滾動位置子組件。然後在子組件中,您可以從onLayout事件(e.nativeEvent.layout.y)獲得頂部的距離。 這幾乎是所有的技巧。

相關問題