Question

我想将搜索输入放在两个View边框之间，但是一半输入隐藏在另一个View后面。

Click Here To Show Image. There are two views. One View's backgroundColor is purple and another view's backgroundColor is white.And half Input type is hide behind another view.

 <Container>
    <Header style={{ backgroundColor: "#635DB7" }}>
      <Left>
        <Button 
          transparent
          onPress={() => this.props.navigation.navigate("DrawerOpen")}
        >
          <Icon name="ios-menu" />
        </Button>
      </Left>

      <Right />
      </Header>

            <View style={{flex:1,zIndex:2}}>
                <View style={{height:192,backgroundColor: "#635DB7"}}>
                    <View style={{position:'absolute',opacity: 1,flex:1,flexDirection:"row",marginTop:160}}>
                    <Input style={{flexDirection:"row",borderRadius:20,marginLeft:30,marginRight:30,backgroundColor:"#434353", zIndex: 2,opacity: 1}} placeholder="Search" />
                    </View>
                </View>

                <View style={{height:448,backgroundColor: "#ffffff",zIndex:1}}>
                </View>
            </View>



  </Container>

Answer 1

尝试将搜索栏作为容器中的最后一项，并使用绝对位置。如果这不起作用，那么你可能遇到了RN android中的一个错误，它不支持溢出：

https://github.com/facebook/react-native/issues/6802

https://github.com/facebook/react-native/issues/3198

如何在反应原生android中的另一个视图上重叠一个视图

1 个答案: