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

Question

I have a render method with these components:

<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>

And this style:

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

Drag and drop is working, but the problem is that when I drag the second element, it is shown above only the first and below all others. I want the component being dragged to be above all others.

I've tried various combinations with zIndex and none worked.

How to do it?

Edit: I've now just achieved with with the "elevation" style in Android. Is it the correct approach (even for iOS)?

Answer 1

It's a shame that most of the PanResponder questions on SO (or at least the ones Ive seen) have no answer. You can use zIndex. Just set the zIndex to 999 or something during the drag, and then on release, set it to the original zIndex+1, so that it STAYS above the other images. If you kept all of the dragged elements at 999, they would no longer overlap after one drag.

Elevation only works on android, but zIndex works on both, and will not create a shadow/3D effect