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

【问题标题】：How to avoid having to click TouchableOpacity twice to trigger onPress event?如何避免必须点击 TouchableOpacity 两次才能触发 onPress 事件？
【发布时间】：2019-10-07 07:09:48
【问题描述】：

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

编辑：

组件：

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

【问题讨论】：

您是否尝试过使用 KeyboardAvoidingView 组件？ facebook.github.io/react-native/docs/0.60/keyboardavoidingview

标签： javascript react-native

【解决方案1】：

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

<ScrollView keyboardShouldPersistTaps='handled'>

...

</ScrollView>

【讨论】：

您好，我已经更新了这个问题，但仍然无法修复它。组件npm模块中没有scrollview
没关系，我小时候有一个滚动视图，里面有对话……而我正在寻找对话的实际来源中的罪魁祸首……facepalm

【解决方案2】：

对于 FlatList 或 ScrollView，您可以使用以下道具

keyboardShouldPersistTaps={true}

【讨论】：

【解决方案3】：

将keyboardShouldPersistTaps添加到父级或最近的FlatList或ScrollView，

确定键盘在点击后何时保持可见。

当键盘向上时，在焦点文本输入之外点击“从不”会关闭键盘。发生这种情况时，孩子们不会接收水龙头。

'always'，键盘不会关闭自动，并且滚动视图不会捕捉点击，但孩子的滚动视图可以点击。

'handled'，键盘不会当水龙头由的孩子处理时自动关闭滚动视图（或由祖先捕获）。

错误，已弃用，改用“从不”

正确，已弃用，请改用“始终”

参考：https://reactnative.dev/docs/scrollview#keyboardshouldpersisttaps

【讨论】：

【解决方案4】：

只需将您的代码从 react-native-keyboard-aware-scroll-view 库中包装起来

<Modal>
  <KeyboardAwareScrollView>
    ...
  </KeyboardAwareScrollView>
</Modal>

就是这样。

【讨论】：