我添加了一个下拉菜单,当我打开它时,下拉菜单隐藏在之后添加的 View 后面。我该如何将下拉 View 置于react-native的最前面。我现在使用了叠加层,它将 View 置于最前面,但是该 View 未设置在其正常位置,而是显示为最顶部的元素。
在主渲染中,我有一个listView:
<ListView ref='listView'
style = {{ backgroundColor: '#EAEAEC'}}
dataSource={this.state.dataSource}
automaticallyAdjustContentInsets={false}
renderRow={this.renderRow}/>
在listView的渲染行中:
return (
<View style={{backgroundColor: '#FFF', marginBottom:5, shadowColor : '#BCBCBC', shadowOffset: {width: 0, height: 0}, shadowOpacity: 0.7, height:150}} >
<View style={{flex:1, flexDirection:'row',justifyContent: 'center', alignItems: 'center', backgroundColor: 'yellow', height:100}}>
<Overlay isVisible={true}><List /></Overlay>
</View>
<View style={{flex:5, flexDirection:'row',justifyContent: 'flex-end', alignItems: 'center', paddingTop:17, marginBottom:10}}>
<View style={{flex:1}}/>
<View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_new_u.imageset/audit_new_u.png')} /></View>
<View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_inProcess_u.imageset/audit_inProcess_u.png')} /></View>
<View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_complete_s.imageset/audit_complete_s.png')} /></View>
<View style={{flex:1}}/>
</View>
</View>
);
现在,下拉菜单实际上是我放置在覆盖标签中的渲染行中的列表标签,现在位于屏幕顶部。
最佳答案
添加{z索引:999}
<View style={{zIndex: 999}}>
{...anything}
</View>
关于react-native将 subview 置于最前面,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34060445/