zIndex doot可在本机卡上运行-反应本机

时间:2019-01-27 11:11:49

标签: javascript react-native native-base

我正在使用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的背景:

1 个答案:

答案 0 :(得分: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