Question

当用户按下多行Return中的TextInput键时，会创建一个新行并继续显示键盘。如何在React native中使用多行TextInput解除键盘？

我做了一些研究。我发现点击View外的TextInput不会模糊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模糊，以便键盘被解除。

Answer 1

TextInput有blurOnSubmit道具;设置为true时，返回键会关闭键盘。

然而目前道具在Android上不起作用。我发布了一个关于这个主题的问题： https://github.com/facebook/react-native/issues/8778

Answer 2

在几个小时的时间里把我的头撞了一下，在摆弄了一下之后，一些愚蠢的运气终于找到了如何通过触摸文本框外面来制作多线TextInput解雇。 ya的小例子希望其他人发现这个有用，因为文档并没有明显表明你可以轻易地解决多线问题......

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

Answer 3

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

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

activeOpacity={1}

确保您已从＆＃39; react-native＆＃39;中导入了TouchableOpacity和键盘。而且你很好。

Answer 4

希望它对其他人有帮助，因为浪费了很多阅读github线程和问题的时间。.

通过执行以下代码，您键盘会显示您想要的示例 "done", "go"返回键，并在您执行操作时关闭键盘在无缝使用多行的情况下按返回done键。

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

// ...code 

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

Answer 5

要完成关于returnKeyType的评论，您还需要设置blurOnSubmit={true}，当按下Done时，它也会触发onSubmitEditing事件处理程序。

有关详细信息，请参阅示例https://rnplay.org/apps/0HIrmw。

Answer 6

在 TextInput 代码-

的以下两个属性中添加此属性

returnKeyType="done"
blurOnSubmit={true}

完整的代码可能看起来像这样-

<TextInput
     placeholder="Text"
     style={styles.textarea}
     multiline={true}
     returnKeyType="done"
     blurOnSubmit={true}
  />

Answer 7

Keyboard.dismiss（）为我解决了这个问题。

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

/>

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

7 个答案: