使用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效果