在 React Native 中关闭多行 TextInput 中的键盘

Posted 2023-04-18

【中文标题】在 React Native 中关闭多行 TextInput 中的键盘

【英文标题】：Dismiss keyboard in multiline TextInput in React native

【发布时间】：2016-12-23 04:41:45

【问题描述】：

当用户在多行TextInput 中按下Return 键时，将创建一个新行并且键盘继续可见。 React native 中的多行 TextInput 应该如何关闭键盘？

我做了一些研究。我发现单击TextInput 外部的View 不会模糊TextInput，这会导致键盘保持可见。

<View style=styles.container>
  <TextInput
    placeholder="To"
    style=styles.input
    value=this.state.to
    onChangeText=(to) => this.setState(to)
  />
  <TextInput
    placeholder="Text"
    style=styles.textarea
    multiline=true
    numberOfLines=4
    value=this.state.text
    onChangeText=(text) => this.setState(text)
  />
</View>

对于ScrollView，有一个道具 - keyboardShouldPersistTaps 会导致TextInput 模糊。 View 有什么等价物吗？我希望多行 TextInput 模糊，以便键盘被关闭。

【问题讨论】：

returnKeyType='done'。见：facebook.github.io/react-native/docs/…

完成创建一个新行。它只会改变文本，不会改变返回键的行为。

【参考方案1】：

TextInput 有一个 blurOnSubmit 属性；当设置为 true 时，返回键关闭键盘。

但目前该道具不适用于 android。我已经发布了一个关于这个主题的问题： https://github.com/facebook/react-native/issues/8778

【讨论】：

对于多行文本输入，返回键输入新行而不关闭键盘。因此，单击视图的其他部分应该会关闭键盘。

@Vijay 来自 React Native 文档：“请注意，对于多行字段，将 blurOnSubmit 设置为 true 意味着按下 return 将模糊字段并触发 onSubmitEditing 事件，而不是在字段中插入换行符。”

还有其他方式可以输入新行吗？如果没有，我更喜欢返回输入新行，然后单击视图的另一部分以关闭键盘。

很遗憾没有。我找不到任何简单的方法来关闭带有 View 的键盘，解决方法是使用 ScrollView 并将 scrollEnabled 属性设置为 false。

这似乎已在 0.46.4 中修复。

【参考方案2】：

希望它可以帮助其他人，因为浪费时间阅读许多 github 线程和问题..

通过执行以下代码，您 keyboard 为 example "done", "go" 显示您想要的返回键，并且当您 dismiss 键盘>按返回键在我的情况下done键同时使用多行无缝。

import Textinput, ScrollView, Keyboard from 'react-native';

// ...code 

 <TextInput
     keyboardType="default"
     returnKeyType="done"
     multiline=true
     blurOnSubmit=true
     onSubmitEditing=()=>Keyboard.dismiss()
  />

【讨论】：

不幸的是，看起来每次点击完成按钮时都会添加一个额外的换行符。

【参考方案3】：

这是上面奥斯汀非常有用的答案的简化版本。

如果您将屏幕/组件的View 转换为带有activeOpacity=1 的TouchableOpacity（这可以防止任何褪色或不透明效果），则可以传递它：

onPress=() => Keyboard.dismiss()

确保你已经从 'react-native' 导入了 TouchableOpacity 和 Keyboard 并且你很好。

【讨论】：

@FortuneCookie。这个答案来自dan674。我只编辑了他的答案以添加代码格式。由于这是他的帖子，因此他会自动收到关于该帖子的所有 cmets 的通知。也许他能帮忙？

【参考方案4】：

为此我头疼了几个小时，在摆弄之后，有些愚蠢的运气终于想出了如何通过触摸文本框外部来关闭多行 TextInput。你的小例子希望其他人觉得这很有用，因为文档并没有说明你可以轻松地消除多行...

import React,  Component  from 'react'`
import 
keyboardAvoidingView,
Keyboard,
StatusBar,
StyleSheet,
TextInput,
View,
 from 'react-native';

class App extends Component 
constructor(props)
super(props)
this.state =
        behavior: 'position',

this._keyboardDismiss =  this._keyboardDismiss.bind(this);

componentWillMount() 
this.keyboardDidHideListener = 
                  Keyboard
                 .addListener('keyboardDidHide',this._keyboardDidHide);                                                         
              

componentWillUnmount()
this.keyboardDidHideListener.remove();


_keyboardDidHide() 
Keyboard.dismiss();


render() 

return (
    <KeyboardAvoidingView 
      styleflex:1
      behavior=this.state.behavior
    >
    <TouchableOpacity
      onPress=this._keyboardDidHide
    >
    <View>
      <TextInput
          style= 
          color: '#000',
          paddingLeft: 15,
          paddingTop: 10,
          fontSize: 18,t
          multiline=true
          textStyle= fontSize: '20', fontFamily: 'Montserrat-Medium' 
          placeholder="Share your Success..."
          value=this.state.text
          underlineColorAndroid="transparent"
          returnKeyType='default'
       />
    </View>
    </TouchableOpacity>

    </KeyboardAvoidingView>
  );
 

【参考方案5】：

要完成我对returnKeyType 的评论，您还需要设置blurOnSubmit=true，它也会在按下完成时触发onSubmitEditing 事件处理程序。

详见示例https://rnplay.org/apps/0HIrmw。

【讨论】：

我希望在单击视图的其他部分而不是单击完成时关闭键盘。

【参考方案6】：

只要只有一个完成按钮，我们仍然需要决定这个返回/完成按钮的作用。在这种情况下，我将建议使用 InputAccessoryView 在键盘上添加另一个关闭按钮。以下代码复制自https://dev.to/vladimirvovk/react-native-ios-keyboard-with-a-custom-button-15h0

<TextInput
      ...
      inputAccessoryViewID="Next"
    />
    <TextInput
      ...
      ref=nextFieldRef
      inputAccessoryViewID="Done"
    />
    
    <InputAccessoryView nativeID="Next">
      <View style=styles.accessory>
        <Button
          onPress=() => nextFieldRef.current.focus()
          title="Next"
        />
      </View>
    </InputAccessoryView>

【参考方案7】：

Keyboard.dismiss() 为我解决了这个问题。

 <TextInput
 keyboardType="default"
 returnKeyType="done"
 multiline=true
 blurOnSubmit=true
 onSubmitEditing=()=>Keyboard.dismiss()

/>