Question

在Android上，我广泛使用elevation。我使用它的唯一原因是得到一个阴影。但是我现在遇到按钮的zIndex问题。

我的底部导航栏高度为4：

<View style={[styles.bottomNav, { elevation:4 }]}>
   { /* ... */ }
</View>
<View style={[styles.button, { elevation:2 }] />

然后我有一个绝对位置圈元素，我想在这个栏上显示。如果高度是按钮的2，它没有显示，我必须将其设置为4+。但是，当按下时，高度为4。

所以为了解决这个问题，我把我的按钮包裹在一个透明的<Modal>中，如下所示：

<View style={[styles.bottomNav, { elevation:4 }]}>
   { /* ... */ }
</View>
<Modal onRequestClose={()=>null} transparent>
    <View style={[styles.button, { elevation:2 }] />
</Modal>

现在按钮阴影非常完美，无论按钮的高度如何。它始终在酒吧上空。但问题是点击不是通过<Modal>

我甚至尝试在模态中放置一个视图并设置其pointerEvents="box-none"（此技巧适用于TouchableNativeFeedback）

<Modal onRequestClose={()=>null} transparent>
    <View style={{width:'100%', height:'100%'}} pointerEvents="box-none">
        <View style={[styles.button, { elevation:2 }] />
    </View>
</Modal>

然而，这仍然不允许新闻事件通过模态。

有没有办法让指针事件通过模态？或者还有其他方法可以在Android上获得尊重zIndex的影子吗？

Answer 1

您可以尝试使用响应者。尝试将onStartShouldSetPanResponderCapture和onResponderTerminationRequest道具添加到模式中。喜欢：

        <Modal onRequestClose={()=>null} transparent
           onStartShouldSetPanResponderCapture={(evt, gestureState) => false}
           onResponderTerminationRequest={() => false}
        >
        <View style={{width:'100%', height:'100%'}} pointerEvents="box-none">
            <TouchableOpacity onPress={()=>console.log(`Test`)} style={{ elevation:2 }}>
            <Text>Button!</Text>
            </TouchableOpacity>
        </View>
    </Modal>

更多信息：https://facebook.github.io/react-native/docs/panresponder

没有高程的android中的阴影（允许通过<modal>点击？）（提升＆＃39;尊重zIndex？）

1 个答案: