android - TouchableOpacity onPress 在 Android 中不触发

Question

我有一个 onPress 处理程序未在 Android 中触发。 _pickImage 方法和 console.log('onpress') 都不会在 Android 上触发。使用世博会 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
  },

我还尝试删除“Overlay”，它在任何情况下都只在上传时激活。

包

  "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"
  }

Answer 1

这可能是因为您的 View 和 z-Index 东西的绝对定位。 您应该/可以为包装赋予风格 <TouchableOpacity />而不是它的 child <View /> .在上面的示例中，进行以下更改:

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

在 TouchableOpacity 而不是下面的 View 中使用样式 ( styles.margotImgEditView)。