TouchableOpacity onPress не работает в Android - PullRequest
Новая
       29

TouchableOpacity onPress не работает в Android

0 голосов
/ 18 декабря 2018

У меня не работает обработчик onPress в Android.Ни метод _pickImage никогда не запускается на Android, ни console.log('onpress').Использование 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"
  }

Ответы [ 2 ]

0 голосов
/ 23 июня 2019

Просто для добавления к существующим ответам.

Проблема в zIndex и должна быть в представлении, что у вас есть абсолютная позиция вкл.

Например: 

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

Когда вы позиционируете что-либо в абсолютном положении, вы всегда должны назначать ему одно z-позиционирование.

0 голосов
/ 18 декабря 2018

Это, вероятно, из-за абсолютного позиционирования ваших представлений и материалов z-Index.Вы должны / можете придать стиль обёртке <TouchableOpacity /> вместо её потомка <View />.В приведенном выше примере внесите это изменение: 

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

У стиля (styles.margotImgEditView) в TouchableOpacity вместо представления ниже.

...