代码之家 › 专栏 › 技术社区 › Nicola Peluchetti

安卓系统中按下不触发时可触摸不透明度

expo react-native-android react-native android

0

Nicola Peluchetti · 技术社区 · 6 年前

我有一个onpress处理程序没有在Android中启动。都不 _pickImage 方法从不在Android上激发,也不在 console.log('onpress') . 利用世博会31。

代码:

  _pickImage = async () => {
    console.log('press');
    const {
      status: cameraPerm
    } = await Permissions.askAsync(Permissions.CAMERA);

    const {
      status: cameraRollPerm
    } = await Permissions.askAsync(Permissions.CAMERA_ROLL);

    // only if user allows permission to camera roll
    if (cameraPerm === 'granted' && cameraRollPerm === 'granted') {
      let pickerResult = await ImagePicker.launchImageLibraryAsync({
        allowsEditing: true,
        aspect: [4, 3],
      });

      this._handleImagePicked(pickerResult);
    }
  };

return (
  <Container>
      ....some code
      <View>
        <View style={styles.margotImgInnerView}>
          <Image source={User.getProfileSource(this.props.profile)} style={styles.margotImg}  />
          <TouchableOpacity onPress={() => { // This doesn't fire on Android
            console.log('onpress');
            this._pickImage()
          }}>
            <View style={styles.margotImgEditView}>
              <Icon name="ios-videocam" style={styles.editCamIcon} />
              <Text style={{ fontSize: 15 }}>Edit</Text>
            </View>
          </TouchableOpacity>
        </View>
        {this._maybeRenderUploadingOverlay()}
      </View>


  margotImgInnerView: {
    position: "absolute",
    top: -(deviceWidth / 6),
    left: deviceWidth / 3,
    width: deviceWidth / 3,
    height: deviceWidth / 3,
    borderRadius: 5,
    borderWidth: 5,
    borderColor: "#fff"
  },
  margotImg: {
    height: deviceWidth / 3 - 10,
    width: deviceWidth / 3 - 10
  },
  margotImgEditView: {
    position: "absolute",
    right: 0,
    bottom: 0,
    height: 25,
    width: 60,
    backgroundColor: "rgba(206,208,203,0.8)",
    borderRadius: 5,
    borderTopRightRadius: 0,
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 0,
    flexDirection: "row",
    justifyContent: "center",
    paddingTop: 3
  },

我还尝试删除“覆盖”,在任何情况下,只有在上传时才激活。

包装

  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^5.10.0",
    "eslint-plugin-flowtype": "^3.2.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-prettier": "^3.0.0",
    "eslint-plugin-react": "^7.11.1",
    "eslint-plugin-react-native": "^3.5.0",
    "flow-bin": "^0.89.0",
    "flow-typed": "^2.5.1",
    "husky": "^1.2.1â¬â¬",
    "jest": "^23.6.0",
    "jest-expo": "^31.0.0",
    "prettier": "^1.15.3",
    "react-test-renderer": "^16.6.3"
  },
  "dependencies": {
    "@babel/core": "^7.2.0",
    "expo": "^31.0.6",
    "jest-cli": "^23.6.0",
    "kleur": "^3",
    "lodash": "^4.17.11",
    "moment": "^2.23.0",
    "native-base": "^2.8.0",
    "prop-types": "^15.6.2",
    "react": "^16.6.0",
    "react-native": "^0.57.0",
    "react-native-gifted-chat": "^0.5.0",
    "react-navigation": "^2.18.3",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-form": "^8.0.4",
    "redux-persist": "^5.10.0",
    "redux-saga": "^0.16.2",
    "redux-thunk": "^2.3.0",
    "remote-redux-devtools": "^0.5.14",
    "remote-redux-devtools-on-debugger": "^0.8.3"
  }

1 回复 | 直到 6 年前

1

Roshan Gautam 6 年前

这可能是因为你的视图和z索引的绝对位置。您应该/可以为包装提供样式 <TouchableOpacity /> 而不是孩子 <View /> . 在上面的示例中,进行以下更改:

<TouchableOpacity style={styles.margotImgEditView} onPress={() => { 
    console.log('onpress');
 }}>
    <View>
      <Text style={{ fontSize: 15 }}>Edit</Text>
    </View>
</TouchableOpacity>

有风格 styles.margotImgEditView )在可触摸的不透明度而不是下面的视图中。