2017-06-29 35 views
0

的我目前使用的滾動型牽我的所有卡一樣陣營本地如何拖卡查看了滾動型

<ScrollView> 
    <Card id={1}/> 
    <Card id={2}/> 
</ScrollView> 

Card是一個定製組件,它基本上是一個具有一定寬度和高度查看。 我使用PanResponder來定義拖動動畫並將處理程序附加到每張卡上。

this._panResponder = PanResponder.create({ 
     onPanResponderGrant: (e, gestureState) => { 
      this.state.pan.setOffset({x: this.state.pan.x._value, y: this.state.pan.y._value}); 
     }, 
     onPanResponderMove: Animated.event([ 
     null, {dx: this.state.pan.x, dy: this.state.pan.y}, 
     ]), 

     onPanResponderRelease: (e, {vx, vy}) => { 
     this.state.pan.flattenOffset() 
     } 
}); 

所以Card組件只呈現動畫視圖像

<Animated.View {...this._panResponder.panHandlers}> 
     ... 
    </Animated.View> 

我可以在任何地方拖動卡滾動視圖,部分溢出滾動視圖將牆根裏。如何讓卡片在scrollView的頂部,然後我可以在屏幕上的任意位置拖動和顯示它。

有趣的是,當我將ScrollView更改爲View時,發現Card可以在View之上拖動。它僅適用於iOS,Android仍然與ScrollView相同。

回答

1

你試圖做的事情不適用於Android。這是因爲RN在Android中不支持overflow:visible作爲documented

溢出樣式屬性默認爲隱藏,不能在Android

改變這意味着你將不得不使用的容器意見層次的發揮,並認爲一個解決辦法的,將有卡包含在更大的容器中或複製到另一層中。

+0

當我使用'ScrollView'或'FlatList'來包裝卡片時,Android和iOS都會隱藏溢出部分的內容。 當我用'View'來包裝卡片時,Android會隱藏溢出內容,iOS運行良好。 –

+0

這可能與您沒有設置「overflow:visible」的事實有關。在View中它默認爲true,但我認爲'ScrollView'會改變每個項目,除非另有規定。我在此文檔基礎上的假設https://facebook.github.io/react-native/docs/scrollview.html#removeclippedsubviews –

+0

你是對的,當設置'overflow:visible'時,iOS按預期工作,但不是Android,謝謝你的回覆。 –