android - 没有提升的 android 中的阴影(允许通过 <Modal> 点击？)(提升的尊重 zIndex？)

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>

我什至尝试在模式中放置一个 View 并设置它的 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

您可以尝试使用 panresponder。尝试将 onStartShouldSetPanResponderCapture 和 onResponderTerminationRequest Prop 添加到模态。喜欢:

        <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