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

使用React Native Animated.View和PanResponder使可拖动项目高于其他所有项目

1 个答案: