【问题标题】:How to tap on a submit button in the view without having to dismiss a keyboard first?如何在视图中点击提交按钮而不必先关闭键盘?
【发布时间】:2018-06-27 08:51:07
【问题描述】:

我正在使用 react native 来实现社区提要。在提要中的每个帖子中,我都可以发表评论,如下所示。

但是,问题是在我输入评论并想按右侧的提交图标后,键盘会先关闭,然后我才能点击图标提交文本。

问题: 如何在按下提交图标后立即提交我的文本而不点击两次(一次关闭键盘,第二次提交)

这是我的实现的 sn-p: //cmets部分/框的代码

<View style={styles.commentSectionContainer}>
    <View style={[textInputStyle.dark, textInputStyle.compact]}>
      <LocalizedTextInput
        multiline={false}
        autoCorrect={true}
        onChangeText={onCommentTextChange}
        placeholder="placeholder/writeComment"
        style={[textInputStyle.default, {fontSize: 13}]}
        underlineColorAndroid="transparent"
        value={textComment}
        onSubmitEditing={() => {
          if (textComment) {
            onSubmitComment();
          }
        }}
        returnKeyType="send"
     />
     <View style={styles.iconSubmitContainer}>
      <IconButton style={styles.commentSubmit} iconName="send" isDisabled={textComment === ''} onPress={onSubmitComment} hitSlop={hitSlop} />
    </View>
  </View>
</View>

本地化文本输入使用以下文本输入

<View style={{flex: 1}}>
  <TextInput
    multiline={multiline}
    style={[defaultStyle, {flex: 1}]}
    underlineColorAndroid="transparent"
    autoCorrect={true}
    {...otherProps}
  />
</View>

所有帖子都包裹在一个滚动视图中。

我尝试使用“keyboardShouldPersistTaps”和keyboardDismissMode="Drag-on",但它没有产生预期的体验。用户应该能够通过点击文本输入框外的任何地方来关闭键盘,而不是要求滚动.

【问题讨论】:

  • 你在哪里添加了“keyboardShouldPersistTaps”。是否有任何滚动视图组件在其中呈现此组件。我们应该在滚动视图中添加“keyboardShouldPersistTaps”。

标签: react-native keyboard textinput onsubmit


【解决方案1】:

如果您的父级是 ScrollView 组件,那么传递 keyboardShouldPersistTaps="always" 属性应该可以解决问题。见官方文档here

【讨论】:

    【解决方案2】:

    正如 Ankit 所建议的,需要将 prop 传递给滚动视图,但如果这不能为您提供所需的结果,TextInput 有一个 blur() 方法,您可以使用该 TextInput 的 ref 调用该方法。也许这会有所帮助。

    【讨论】:

      猜你喜欢
      • 2018-07-24
      • 2011-05-10
      • 2017-04-26
      • 2016-01-11
      • 1970-01-01
      • 1970-01-01
      • 2019-06-21
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多