TouchableOpacity onPress在Android中不触发

Question

I have an onPress handler not firing in Android. Neither the _pickImage method is never fired on Android, nor the console.log('onpress') . Using Expo 31.

Code:

  _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
  },

I also tried removing the "Overlay" which in any case is only activwe when Uploading.

Packages

  "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

It's probably because of absolute positioning of your views and z-Index stuffs. You should/can give style to the wrapping <TouchableOpacity /> instead of it's child <View /> . In the above example, make this change:

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

Have style ( styles.margotImgEditView ) in TouchableOpacity instead of the View beneath.

Answer 2

Just to add to the existing answers.

The problem is in zIndex and should be on the view that you have absolute position on.

Eg:

<View style={{position:'absolute', zIndex: 1}}>
<Button title="target button. May be touchable element whatever" onPress={this._onButtonPress} />
</View>

When you ar positioning anything in absolut position, you should always give it one z positioning.