在React Native中的多行文本输入框中如何关闭键盘

Question

当用户在多行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的属性？ 我想让多行输入框模糊，以便键盘被解除。

- vijayst

---

returnKeyType={'done'}。请参见： https://facebook.github.io/react-native/docs/textinput.html#returnkeytype - Samuli Hakoniemi

Done会创建一个新的行。它只改变文本，而不会改变回车键的行为。 - vijayst

Answer 1

TextInput具有blurOnSubmit属性；当其设置为true时，按下回车键将关闭键盘。

然而，目前该属性在Android系统上不起作用。我已经在以下问题页面中发布了一个问题： https://github.com/facebook/react-native/issues/8778

- Mika Kuitunen

---

对于多行文本输入框而言，回车键应该是换行而非隐藏键盘。因此，当点击视图的其他部分时应该隐藏键盘。 - vijayst

请注意，对于多行文本字段，将blurOnSubmit设置为true意味着按回车键将使字段模糊并触发onSubmitEditing事件，而不是在字段中插入换行符。 - Mika Kuitunen

有其他换行的方式吗？如果没有，我更喜欢使用回车键来换行，并点击视图的另一部分以关闭键盘。 - vijayst

很遗憾，我找不到任何轻松的方法来使用视图来关闭键盘。解决方法是使用 ScrollView 并将 scrollEnabled 属性设置为 false。 - Mika Kuitunen

看起来这个问题在0.46.4版本中已经被修复了。 - Rich Churcher

但我希望能够输入新行并通过按钮关闭键盘。这是基本功能。 - Dror Bar

Answer 2

希望这能帮助其他人，因为在阅读许多github线程和问题时浪费了时间...

通过执行下面的代码，您可以使您的键盘显示所需的返回键，例如"done"，"go"，并且在我使用多行时，当您按下done键时无缝地使键盘消失。

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

// ...code 

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

- Abhishek Garg

---

很遗憾，看起来每次他们点击完成按钮时都会添加一个额外的换行符。 - Dylan Nissley

似乎你还需要声明 numberOfLines 才能使其工作。 - Dror Bar

@DrorBar 不确定，已经过去5年了。期间React Native库肯定有很多变化。当我回答这个问题时，它可以不需要额外的参数就能工作。 - Abhishek Garg

Answer 3

这是Austin在上面提供的非常有帮助的答案的简化版本。

如果你将你屏幕/组件的 View 转换为一个带有 activeOpacity={1} 的 TouchableOpacity（这可以防止任何淡入淡出或透明度效果），然后你可以传递它：

onPress={() => Keyboard.dismiss()}

确保您已从 'react-native' 中导入了 TouchableOpacity 和 Keyboard，并且一切顺利。

- dan674

---

@FortuneCookie。这个答案是来自dan674的。我只是编辑了他的答案以添加代码格式。由于这是他的帖子，他将自动收到所有留在此帖子中的评论的通知。也许他能够提供帮助？ - SherylHohman

Answer 4

我一直在解决这个问题，费了几个小时的劲。在摸索和一些运气的帮助下，我终于找到了方法，可以通过轻触文本框外部来使多行TextInput消失。这里有一个小例子，希望有人能从中受益，因为文档并没有明确说明你可以轻松地让多行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 
      style{{flex: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>
  );
 }
}

- austin reynolds

Answer 5

为了完善我对于returnKeyType的评论，你还需要设置blurOnSubmit={true}，这样当按下Done键时也会触发onSubmitEditing事件处理程序。

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

- Samuli Hakoniemi

---

当单击视图的其他部分而不是单击完成时，我希望键盘被解除显示。 - vijayst

Answer 6

如果有人仍然在处理以下问题，特别是在保留回车键以添加新行并在单击输入框外部时关闭键盘方面遇到困难，常规视图组件在单击组件外部时不会模糊TextField。但是，如果您使用ScrollView而不是常规View，则单击屏幕上的任何位置都将触发onBlur效果，并且下面的代码将关闭键盘并保留回车键以添加新行。如果您不想滚动，可以在滚动视图上设置scrollEnabled={false}，它仍将触发事件。

<TextField
  value={value}
  placeholder="Description..."
  multiline
  numberOfLines={20}
  keyboardType="default"
  onBlur={() => {
    Keyboard.dismiss();
  }}
/>

- Ryan

Answer 7

只要有一个完成按钮，我们仍然需要决定这个返回/完成按钮的功能。在这种情况下，我建议使用InputAccessoryView通过添加另一个dismiss按钮到键盘。以下代码是从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>

- user3453552

Answer 8

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

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

/>

- jyotishman saikia