Question

我添加了一个下拉列表，当我打开它时，下拉菜单隐藏在之后添加的视图后面。如何将下拉视图置于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, 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>


  );

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

Answer 1

添加{zIndex：999}

<View style={{zIndex: 999}}>
{...anything}
</View>

Answer 2

There is no z-index equivalent in react-native. 在没有看到某些代码的情况下，我可以做的唯一建议是使用类似react-native-overlay

的内容

Answer 3

您必须确保主视图内的所有子视图都具有zIndex样式属性。像这样：

const [myIndex, setMyIndex] = useState(1)
<View>
  <View style={{zIndex: 3}}></View>
  <View style={{zIndex: myIndex}}>
    <Button onPress={() => setMyIndex(4)} title='Press to show above the other' />
  </View>
  <View style={{zIndex: 2}}></View>
</View>

react-native将子视图带到前面

3 个答案: