如何避免必须单击 TouchableOpacity 两次才能触发 onPress 事件?

问题描述

我正在使用 this 模块，问题是弹出的Dialogue元素，是一个Modal，有两个TouchableOpacity按钮.键入后，当键盘打开时，单击提交"TouchableOpacity 将首先清除/隐藏键盘，只有第二次点击提交"TouchableOpacity 才会触发 onPress 事件.我可以做些什么作为解决方法?我已经尝试将它从 react-native 和从 react-native-elements 更改为一个按钮，但它的行为方式相同.

I'm using this module and the issue is that the Dialogue element that pops up, which is a Modal, has two TouchableOpacity buttons. After typing, when the keyboard is up, clicking the 'submit' TouchableOpacity will first clear/hide the keyboard, and only the second tap on the 'submit' TouchableOpacity will trigger the onPress event. What can I do as a workaround here? I've tried changing it to a Button from react-native and from react-native-elements but it behaves the same way.

组件:

    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>
    );

推荐答案

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

This is likely because a parent scrollview is intercepting the tap gesture. To solve this problem, find the nearest ScrollView or FlatList parent and add the keyboardShouldPersistTaps='handled' attribute. This will prevent the keyboard from auto dismissing on the tap (which consumes the tap). You may need to add Keyboard.dismiss() to get it to work as expected.

<ScrollView keyboardShouldPersistTaps='handled'>

...

</ScrollView>

这篇关于如何避免必须单击 TouchableOpacity 两次才能触发 onPress 事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！