我想在一個FlatList中的反應本機制作一個動畫。絕對定位一個FlatList項目react-native
平直列表
--------
item1
--------
item2
--------
item3
--------
當我按下ITEM2的FlatList看起來就像這樣:
--------
item1
--------
empty
--------
item3
而且在FlatList(從空白處開始)這將是頂部item2擴展到全屏高度,不允許item1和item3在列表中移動。
有沒有人有一個想法,如果這可以使用react-native?
我已經試過這個使用zIndex的絕對定位,但似乎沒有任何工作。
這裏是我的FlatList項目
<Animated.View style={[ { height: this.state.height }, this.state.pressed ? { position: 'absolute', top:0, bottom:0, left:0, right:0, zIndex: 1000 } :
{} ]}>
<Text>Absolute expandable FlatList item</Text>
</Animated.View>
的FlatList項目具有絕對的風格,因爲反應的每一個元素都有默認相對定位。
我做了一個沒有絕對定位的技巧,使用scrollToIndex移動列表頂部的元素,然後將其定位爲絕對位置。但是這會使item3在屏幕上消失,同時item2的高度也在擴大。
有什麼想法?
如果我會這樣做,那麼動畫不會流動。由於外部的「模態」組件在改變狀態時會出現閃爍,會在每個項目的水龍頭上重新渲染。如果在關閉它之前重置它,然後改變狀態並重新渲染組件,它將顯示一小部分時間舊元素或空元素。只有在狀態改變之後,我才能使用它來改變zIndex和/或不透明度,但這不會很費勁。 –
我將響應標記爲正確的,因爲確實可以實現我所問的內容,但是在兩個項目(FlatList項目和所有外部項目上使用的外部項目)的狀態更改觸發重新呈現時,閃爍就在那裏。我選擇了初始解決方案:FlatList.scrollToIndex + ItemList Animation + FlatList.scrollEnabled = false + itemList.scrollEnabled = true。 –
我知道這不適合你的用例,但我做了這個零食,可能對某些人有用。 https://snack.expo.io/@n1ru4l/listview-2-fullscreen – l0rin