react-native将子视图带到前面

发布时间：2020-12-15 20:19:06 所属栏目：百科来源：网络整理

导读：我添加了一个下拉列表,当我打开它时,下拉菜单隐藏在之后添加的视图后面.如何将下拉视图置于react-native中.我现在使用了叠加层,它将视图置于前面,但视图未设置在其正常位置,而是显示为最顶层的元素. 在主渲染中我有一个listView： ListView ref='listView' s

我添加了一个下拉列表,当我打开它时,下拉菜单隐藏在之后添加的视图后面.如何将下拉视图置于react-native中.我现在使用了叠加层,它将视图置于前面,但视图未设置在其正常位置,而是显示为最顶层的元素.

在主渲染中我有一个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,justifyContent: 'flex-end',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>


  );

现在,我在放置标签中放置的渲染行中实际上是List标签的下拉列表现在放在屏幕顶部.

解决方法

There is no z-index equivalent in react-native.
没有看到一些代码,我可以做的唯一建议是使用像 react-native-overlay这样的东西

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!