使用React Native Animated.View和PanResponder將可拖動項置於所有其他項之上

Question

我有這些組件的render方法：

<View style={styles.root}>
    {p.parts.map((part, index) =>
        <Animated.View
            key={`part${index}`}
            style={[
                this.draggables[index].pan.getLayout()
            ]}
            {...this.draggables[index].panResponder.panHandlers}
        >
            <SphereView part={part} />
        </Animated.View>
    )}
</View>

而這種風格：

const styles = StyleSheet.create({
    root: {
        flexDirection: 'row'
    }
});

拖放有效，但是問題是，當我拖動第二個元素時，它僅在第一個元素上方顯示，而在所有其他元素下方顯示。 我希望將組件拖動到所有其他組件之上。

我已經嘗試過使用zIndex進行各種組合，但均無效果。

怎么做？

編輯：我現在剛剛在Android中以“高程”樣式實現了。 這是正確的方法（甚至對於iOS）嗎？

Answer 1

可惜的是，大多數關於SO的PanResponder問題（或者至少是我見過的問題）都沒有答案。 您可以使用zIndex。 只需在拖動過程中將zIndex設置為999或類似的值，然后在釋放時將其設置為原始zIndex + 1，使其停留在其他圖像上方。 如果將所有拖動的元素都保留為999，則一次拖動后它們將不再重疊。

高程僅適用於android，但zIndex兩者均可，並且不會創建陰影/ 3D效果