react-native - 使用 React Native Animated.View 和 PanResponder 将可拖动项目置于所有其他项目之上

Question

我有一个带有这些组件的渲染方法:

<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，则在一次拖动后它们将不再重叠。

Elevation 仅适用于 android，但 zIndex 对两者都适用，并且不会创建阴影/3D 效果