无法获得具有绝对位置的弹出窗口以在安卓上工作

Question

我在使用React Native进行zIndex和定位时遇到了大问题。我有包含主应用程序的视图，从根组件我有一个可以通过redux激活的弹出窗口。在iOS上，一切都很好(使用zIndex)，但在Android上，它完全崩溃了。

弹出窗口位于主视图上方，但我仍然可以拖动并与下面的视图交互。

https://www.dropbox.com/s/7cjajxl5ctwkdph/Video%202019-01-30%2014%2018%2008.mov？dl=0

请参阅视频中的行为。

下面的视频显示了预期的行为：https://www.dropbox.com/s/vx7sr3j4dw7igh9/Video%202019-01-30%2014%2029%2020.mp4？dl=0

关于如何解决这个问题有什么想法吗？我使用的是高程和zIndex。甚至尝试为android将zIndex设置为0，但没有改变任何内容。

主视图：

<View style={{flex: 1}}>
{ props.showPopUp ?
<PopupMain payload={props.popUpPayload} /> :
null
}
<AppContainerCreator
style={{zIndex:0, elevation:0, position:'absolute', width:'100%', height:'100%', bottom:0,top:0,left:0,right:0}}
persistenceKey={props.persistenceKey}
processNavigation={props.processNavigation}
screenProps={props.screenProps}
ref={navigatorRef => props.setNavRef(navigatorRef)}
/>
</View>

PopupMain:

<View style={{
position:'absolute',
width:'100%',
height:'100%',
bottom:0,
top:0,
right:0,
overflow:'visible',
left:0,
zIndex:1,
elevation:1
}}>
<Animated.View style={{
position:'absolute',
width:'100%',
height:'100%',
bottom:0,
top:0,
right:0,
left:0,
elevation:2,
backgroundColor:'#000',
opacity:this.state.opacityAnimation,
zIndex:2
}}>
</Animated.View>
<Animated.View
style={{
position: 'absolute',
width: '93%',
height: '93%',
bottom:!this.state.animating ? this.state.offset : this.state.offsetAnimation,
elevation:3,
zIndex:3,
left:'3.5%',
opacity:1,
backgroundColor:'white',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
overflow:'hidden'
}}
>
<View style={{height:60, width:'100%'}}>
{header}
</View>
<ScrollView
style={{width:'100%', height:(Dimensions.get('window').height * 0.93) - 60, overflow:'hidden', zIndex:4, elevation:4, left:0, right:0, bottom:0}}
alwaysBounceVertical={true}
onScroll={this.handleScroll}
scrollEventThrottle={8}
>
{popup}
</ScrollView>
</Animated.View>
</View>
);

同样由于某些原因，弹出窗口中的内容也没有在android上显示。它隐藏在景色后面。

除了隐藏的滚动视图中的内容外，所有元素都以正确的方式定位。然而，我仍然可以与以下观点互动。

在iOS上，一切都与预期完全一样。

提前感谢！

Answer 1

yee absolute需要对以下视图中的事件进行一些处理。。。

不要让你的生活变得困难，如果你想屏蔽后台ui，建议使用模态。React native有一个内置的模态组件，但也有React native模态模块，它内置了React native-animable的所有动画，滑动以取消支持，等等；)我把它用于弹出窗口、不受欢迎的菜单，有时甚至自定义警报和下拉选择器