javascript - 反应原生阻止按钮制造商的顶部不可点击

Question

封面顶部的上传按钮不可点击 这是设计

带有上传封面的按钮是一个问题，我认为封面阻止了按钮，因为它发生在其他屏幕上，但我只使用 zIndex 并且它工作正常。我什至尝试“绝对”定位，但什么也没发生。renderBg 只是一个显示用户当前配置文件封面的函数在此处输入代码

  <Container>
    <Content style={{ zIndex: 1, backgroundColor: Colors.grey }}>
      {
        renderBG()
      }
      <View style={{ height: height * 0.2 }}>
        <Header>
          <TouchableOpacity
            style={{ alignItems: 'center', flex: 1 }}
            onPress={() => setPrivacy()}
          >
            <View>
              <Icon
                type="Ionicons"
                name={account_details && account_details.isPrivate ? 'ios-eye-off' : 'ios-eye'}
                size={28}
                style={{
                  color: account_details && account_details.isPrivate ? '#d5d5d5' : Colors.green,
                  elevation: 5,
                  borderRadius: 20,
                }}
              />
            </View>
          </TouchableOpacity>
          <View style={{ flex: 5, alignItems: 'center' }}>
            <Text style={{ color: '#d5d5d5', marginLeft: -60 }}>
              {getTitle()}
            </Text>
          </View>
          {/* {
    profiles.length > 1
      ? (
        <Button
          small
          icon
          color={Colors.red}
          style={{ alignItems: 'center', flex: 1 }}
          onPress={() => setConfirmDelete(true)}
        >
          <Icon
            name="ios-trash"
            size={28}
            style={{ color: '#d5d5d5' }}
          />
        </Button>
      )
      : <View style={{ flex: 1 }} />
  } */}
        </Header>
      </View>


      <View
        style={{
          backgroundColor: '#fff',
          height: verticalScale(156),
          width,
          alignItems: 'center',
          zIndex: 4,
        }}
      >
        <View style={{
          zIndex: 4,
          marginTop: -verticalScale(20),
          marginLeft: width * 0.64,
          flexDirection: 'row',
          justifyContent: 'flex-end',
        }}
        >
          <Button small icon withShadow onPress={uploadCover}>
            <FeatherIcon name="upload" />
          </Button>
        </View>
        <View>
          {
             avatarDisplay()
           }
          <View style={{
            zIndex: 4,
            // marginTop: -verticalScale(72),
            marginTop: -verticalScale(42),
            flexDirection: 'column',
            left: 50,
          }}
          >
            <Button small icon withShadow onPress={uploadAvatar}>
              <FeatherIcon name="upload" />
            </Button>

            {
              // account_details.field_avatar === undefined
              // && account_details.field_avatar === ''
              //   ? <View style={{ height: 34 }} />
              //   : (
              //     <Button small icon color={Colors.red} withShadow onPress={removeAvatar}>
              //       <Icon type="FontAwesome" name="trash" />
              //     </Button>
              //   )
            }

          </View>
        </View>

标签： javascriptreact-native