Z指数不能在本机底座的卡工作 - 本土反应

问题描述 投票:0回答:1

我使用native-base。这是我的代码:

                     <View style={{width:'100%',height:45}}>
                      <Card style={{position:'absolute',zIndex:90,paddingTop: 0, marginRight:10,width: '100%', alignSelf: 'center',borderRadius:10,padding:10,height:45 }}>
                        <CardItem style={{ position:'absolute', zIndex:1,backgroundColor: '#fff', height: 45, width: '100%', paddingTop: 0, paddingBottom: 0, justifyContent: 'flex-end' }}>
                          <TouchableOpacity onPress={() => this.onClickSubs(sub)} style={{height:'100%',width:'100%'}}>
                            <Text onPress={() => this.onClickSubs(sub)} style={{ textAlign: 'center', fontSize: 16, color: colorConstants.GRAY_LIGHT_COLOR }}>{sub.title}</Text>
                          </TouchableOpacity>
                        </CardItem>
                      </Card>
                      <View style={{position:'absolute',zIndex:999,right:0,width:20,height:20,borderRadius:10,borderWidth:2,borderColor:'#fff',backgroundColor:colorConstants.PRIMARY_COLOR,alignSelf:'center',justifyContent:'center',alignItems:'center'}}>
                      </View> //circle view

                      </View>

但我的圈子的看法是Card的背景:

javascript react-native native-base
1个回答
1
投票

就在你的圈子视图样式添加高程值

        <View
          style={{
            position: "absolute",
            zIndex: 999,
            right: 0,
            width: 20,
            height: 20,
            borderRadius: 10,
            borderWidth: 2,
            borderColor: "#fff",
            backgroundColor: "red",
            alignSelf: "center",
            justifyContent: "center",
            alignItems: "center",
            elevation:3  <-----------elevation in circle view---------
          }}
        />

没有抬高

enter image description here

随着海拔

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.