Question

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

Answer 1

这可能是因为视图和z-Index内容的绝对位置。您应该/可以给包装<TouchableOpacity />赋予样式，而不要为其子元素<View />赋予样式。在上面的示例中，进行以下更改：

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

在TouchableOpacity中具有样式（styles.margotImgEditView，而不是下方的视图。

Answer 2

只需添加到现有答案中即可。

问题出在zIndex上，应该位于您拥有绝对位置的视图上。

例如：

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

将任何物体绝对定位时，都应始终对其进行一次z定位。

TouchableOpacity onPress在Android中不触发

2 个答案: