javascript - 如何避免必须点击 TouchableOpacity 两次才能触发 onPress 事件？

Question

我正在使用 this模块和问题是弹出的对话框元素，它是一个模态，有两个 TouchableOpacity 按钮。键入后，当键盘向上时，单击“提交”TouchableOpacity 将首先清除/隐藏键盘，只有第二次点击“提交”TouchableOpacity 才会触发onPress 事件。我可以在这里做些什么作为解决方法？我尝试将它从 react-native 更改为按钮来自 react-native-elements但它的行为方式相同。

编辑:

组件:

    return (
      <Modal
        animationType="fade"
        transparent={true}
        visible={this.props.isDialogVisible}
        onRequestClose={() => {
          this.props.closeDialog();
          this.setState({ inputModal: "" });
        }}
      >
        <View style={[styles.container, { ...modalStyleProps }]}>
          <TouchableOpacity
            style={styles.container}
            activeOpacity={1}
            onPress={() => {
              this.props.closeDialog();
              this.setState({ inputModal: "", openning: true });
            }}
          >
            <View style={[styles.modal_container, { ...dialogStyleProps }]}>
              <View style={styles.modal_body}>
                <Text style={styles.title_modal}>{title}</Text>
                <Text
                  style={[
                    this.props.message ? styles.message_modal : { height: 0 }
                  ]}
                >
                  {this.props.message}
                </Text>
                <TextInput
                  style={styles.input_container}
                  autoCorrect={
                    textProps && textProps.autoCorrect == false ? false : true
                  }
                  autoCapitalize={
                    textProps && textProps.autoCapitalize
                      ? textProps.autoCapitalize
                      : "none"
                  }
                  clearButtonMode={
                    textProps && textProps.clearButtonMode
                      ? textProps.clearButtonMode
                      : "never"
                  }
                  clearTextOnFocus={
                    textProps && textProps.clearTextOnFocus == true
                      ? textProps.clearTextOnFocus
                      : false
                  }
                  keyboardType={
                    textProps && textProps.keyboardType
                      ? textProps.keyboardType
                      : "default"
                  }
                  autoFocus={true}
                  onKeyPress={() => this.setState({ openning: false })}
                  underlineColorAndroid="transparent"
                  placeholder={hintInput}
                  onChangeText={inputModal => {
                    if (this.props.setBackupCommentText) {
                      this.props.setBackupCommentText(inputModal);
                    }

                    this.setState({ inputModal });
                  }}
                  value={value || this.props.backupCommentText}
                  multiline={true}
                />
              </View>
              <View style={styles.btn_container}>
                <TouchableOpacity
                  style={styles.touch_modal}
                  onPress={() => {
                    this.props.closeDialog();
                    this.setState({ inputModal: "", openning: true });
                  }}
                >
                  <Text style={styles.btn_modal_left}>{cancelText}</Text>
                </TouchableOpacity>
                <View style={styles.divider_btn}></View>
                <TouchableOpacity
                  style={styles.touch_modal}
                  onPress={() => {
                    if (
                      this.props.initValueTextInput &&
                      this.props.initValueTextInput.trim().length === 0
                    ) {
                      Toast.show("Comment cannot be empty");
                    } else {
                      this.props.submitInput(value);

                      this.setState({ inputModal: "", openning: true });

                      if (this.props.setBackupCommentText) {
                        this.props.setBackupCommentText("");
                      }
                    }
                  }}
                >
                  <Text style={styles.btn_modal_right}>{submitText}</Text>
                </TouchableOpacity>
              </View>
            </View>
          </TouchableOpacity>
        </View>
      </Modal>
    );

Answer 1

这可能是因为父 ScrollView 正在拦截点击手势。要解决这个问题，找到最近的ScrollView或 FlatList父并添加 keyboardShouldPersistTaps='handled'属性。这将防止键盘在点击时自动关闭(消耗点击)。您可能需要添加 Keyboard.dismiss()让它按预期工作。

<ScrollView keyboardShouldPersistTaps='handled'>

...

</ScrollView>