如何避免需要点击两次TouchableOpacity才能触发onPress事件？

Question

我正在使用这个模块，问题是弹出的对话框元素（Modal）有两个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>
    );

- Mike K

---

你尝试过使用KeyboardAvoidingView组件吗？https://facebook.github.io/react-native/docs/0.60/keyboardavoidingview - Maksym Bezruchko

Answer 1

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

<ScrollView keyboardShouldPersistTaps='handled'>

...

</ScrollView>

- Mike M

---

你好，我在尝试修复问题后更新了问题。该组件的npm模块中没有scrollview。 - Mike K

没事了，我有一个ScrollView，对话框是它的子对象...而我一直在寻找对话框实际来源的罪犯...扭头 - Mike K

对于仍在努力克服这个问题的任何人 - 我不得不将此属性设置为所有ScrollView父级才能使其正常工作。 - Kia Kaha

Answer 2

对于FlatList或ScrollView，您可以使用以下属性：

keyboardShouldPersistTaps={true}

- Rajesh N

---

true已被弃用，现在我们应该使用'always'代替（https://reactnative.dev/docs/scrollview#keyboardshouldpersisttaps） - Benjamin Heinke

Answer 3

在父级或最近的FlatList或ScrollView中添加keyboardShouldPersistTaps属性，

确定键盘在点击后应该保持可见。

• 'never'：当键盘弹出时，点击文本输入框之外的区域会使键盘消失。此时，子元素将无法接收到点击事件。
• 'always'：键盘不会自动消失，滚动视图也不会捕获点击事件，但是滚动视图的子元素可以捕获点击事件。
• 'handled'：当点击事件被滚动视图的子元素（或祖先元素）处理时，键盘不会自动消失。
• false：已弃用，请使用'never'代替。
• true：已弃用，请使用'always'代替。

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

- Namae Conde

Answer 4

只需将您的代码包装在react-native-keyboard-aware-scroll-view库中即可。

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

就是这样。

- Oleksii Vakhrushev