具有绝对位置的元素被其他组件切断

Question

我的RN应用程序中有一个工具栏。该工具栏有一个特意超大的按钮，并且从组件中溢出 超大按钮由同一页面中的其他组件覆盖

  touchable:{
    backgroundColor:'#3d3d3d',
    borderRadius:27.5,
    position:'absolute',
    left:width/2 -25,
    bottom:10,
    alignItems:'center',
    borderColor:'black',
    width:55,
    height:55,
    justifyContent:'center',
  }

标记：

  render() {
    return (
    <View style={{flex: 1}}>
      <View style={{position:'absolute', width:42,height:42,left:20,top:(height-42)/3,zIndex:3}}>
          <Image style={{}} source={require('./Images/Ellipse 36.png')} />
          <Image style={{position:'absolute',top:14,left:14}} source={require('./Images/Asset 65.png')} />
      </View>
      <View style={{position:'absolute', width:42,height:42,right:20,top:(height-42)/3,zIndex:3}}>
          <Image style={{}} source={require('./Images/Ellipse 36.png')} />
          <Image style={{position:'absolute',top:10,left:12}} source={require('./Images/Asset 66.png')} />
      </View>
      <View><TopToolbar text='Swipe' navigator={this.props.navigator} user={this.props.user}/></View>
      <ScrollView style={{zIndex:1,}}><Inders style={{flex: 1}} navigator={this.props.navigator} credentials={this.props.credentials}/></ScrollView>
      <View style={{zIndex:0,}}><BottomToolbar user={this.props.user} navigator={this.props.navigator} credentials={this.props.credentials}/></View>
    </View>
    )
  }

Inders是一个组成部分 我尝试改变组件的顺序，但它不起作用 使按钮从另一个组件“浮动”的方法是什么？

Answer 1

在开发工具菜单中打开检查器，找出谁切割了你的组件，我也想设置backgroundColor来查看它们的位置，它可以更容易地解决这类错误。

Answer 2

解决方案是将工具栏包装在另一个视图中，以便新视图是您想要“浮动”的元素的父级。