Question

点击此绝对位置按钮在我触摸它时不起作用。

代码

 render() {
    return (
        <Container> 
            <View style={{ borderColor: '#fff',height:'30%'}}>
                <ImageBackground
                    source={{uri: 'https://i.ibb.co/TwdZhVM/image-5.png'}}
                    style={styles.singleCategoryViewBackgroundImage} >
                </ImageBackground>
                <View style={styles.overlay}>
                    <Thumbnail large
                        style={styles.profileImage}
                        source={{uri:"https://firebasestorage.googleapis.com/v0/b/weddi-4c344.appspot.com/o/Laser%20%26%20Beauty%20Centers%2FDivine%20beauty%20clinics%2FLogo.jpg?alt=media"}} />
                    <View style={styles.titleContent}>  
                        <Text style={styles.titleText}> Divine Beauty Center</Text>
                        <Text note>Cairo - Naser City</Text>
                        <View style={{flexDirection: 'row'}}>
                        <Button  rounded style={styles.actionButton}
                        onPress={() =>
        ActionSheet.show(
          {
            options: BUTTONS,
            cancelButtonIndex: CANCEL_INDEX,
            destructiveButtonIndex: DESTRUCTIVE_INDEX,
            title: "Testing ActionSheet"
          },
          buttonIndex => {
            this.setState({ clicked: BUTTONS[buttonIndex] });
          }
        )}
      >
                            <Icon ios="ios-pin" android="md-pin" color="#1a1917"/>
                        </Button>
                        <Button  rounded style={styles.actionButton}>
                            <Icon ios="ios-call" android="md-call" color="#1a1917"/>
                        </Button>
                        </View>
                    </View> 
                </View>
            </View>
            <Content style={{paddingHorizontal: '6%', marginTop: '20%', height: '20%'}}> 
            </Content>
        </Container>

样式

  overlay: {
      alignItems: 'center',
      height: '65%',
      backgroundColor: colors.offWhite,
      position: 'absolute',
      top: '68%',
      left: 0,
      right: 0,
      bottom: 0,
      zIndex: 1,
      marginHorizontal: '6%',
      borderRadius: 10/2,
      opacity: 0.95,
    },
    singleCategoryViewBackgroundImage: {
      width: '100%',
      height: '100%',
      justifyContent:'center',
      alignContent:'center',
    },
    profileImage: {
        position: 'absolute',
        top: '-38%',
        left: '36%',
        right: 0,
        bottom: 0,
        zIndex: 2,
        alignSelf: 'center',
        overflow: 'hidden',
        borderWidth: 2,
        borderColor: '#b42334',
        width: 100,
        height: 100,
        borderRadius: Platform.OS === 'ios' ? 0 : 150/2,
    },
    titleContent: {
      zIndex: 40,
      marginVertical: '15%',
      alignItems: 'center',
    },
    titleText: {
      fontFamily: 'Roboto',
      fontWeight: 'bold',
    },

    actionButton: {
      width:50,
      zIndex: 50,
      margin: '2%',
      backgroundColor: colors.red,
    }

我尝试用react native按钮替换native-base按钮仍然无法正常工作，但是当我将按钮置于此位置绝对混乱时，它的效果很好，但是我喜欢它在该视图中的外观，因此我能找到任何想法那样工作吗？

Answer 1

来自https://www.w3schools.com/cssref/pr_pos_z-index.asp：“注意：z-index仅适用于定位的元素（位置：绝对，位置：相对，位置：固定或位置：粘性）。”由于actionButton未指定位置属性，因此它的位置是默认位置值（静态），并且z-index不适用。因此，绝对定位的Views位于按钮上方。

反应原始位置绝对按钮不起作用

1 个答案: