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

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

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

通过执行以下代码，您可以在键盘上显示所需的返回键，例如 "done", "go" ，在无缝使用多行的情况下按我的case 键中的返回键时，也可以关闭键盘。done

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

// ...code 

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

Answer 3

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

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

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

确保您已从“ react-native”导入了TouchableOpacity和Keyboard，并且一切都很好。