2017-10-19 125 views
0

我想在一個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的高度也在擴大。

有什麼想法?

回答

1

實現此目的的一種方法可能是具有絕對定位和不透明度0的額外組件。按下某個項目時,您可以將按下項目的不透明度設置爲0,然後使用按下的信息渲染額外組件項目,然後你可以給所需的動畫。這種方式按下項目的行將仍然填充,但被視爲空。如果這個額外的組件在FlatList項目內,它不能超出行的界限(據我所知)。您可能需要計算按下的項目的位置,以便從中啓動額外組件的動畫。

+1

如果我會這樣做,那麼動畫不會流動。由於外部的「模態」組件在改變狀態時會出現閃爍,會在每個項目的水龍頭上重新渲染。如果在關閉它之前重置它,然後改變狀態並重新渲染組件,它將顯示一小部分時間舊元素或空元素。只有在狀態改變之後,我才能使用它來改變zIndex和/或不透明度,但這不會很費勁。 –

+0

我將響應標記爲正確的,因爲確實可以實現我所問的內容,但是在兩個項目(FlatList項目和所有外部項目上使用的外部項目)的狀態更改觸發重新呈現時,閃爍就在那裏。我選擇了初始解決方案:FlatList.scrollToIndex + ItemList Animation + FlatList.scrollEnabled = false + itemList.scrollEnabled = true。 –

+0

我知道這不適合你的用例,但我做了這個零食,可能對某些人有用。 https://snack.expo.io/@n1ru4l/listview-2-fullscreen – l0rin