react-native：隐藏键盘

编辑：我真的很感激所有的答案和意见，相当一段时间后仍然进来。 可悲的是，我无法检查所有这些，因为我目前没有足够的时间与反应本地化工作。 请投票新的和有益的答案，并在评论中提到他们，以便我能够标记最有用的答案。

这可能是一个非常愚蠢的问题，但我有一种感觉，即整个反应 – 本土社区知道如何做到这一点，我无法弄清楚。

我的目标很简单。 如果我点击一个文本input，我希望能够点击其他地方为了再次closures键盘（不是返回键虽然）。 这个问题让我有点疯狂，因为我在所有的教程和博客文章中都没有find有关这方面的信息。

我相信这个解决scheme非常简单。 希望有人能帮助我！ 🙂

更新：这个基本的例子仍然不适合在模拟器中使用react-native 0.4.2。 无法在我的iPhone上试用它。

<View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} onEndEditing={this.clearFocus} /> </View> 

Answer 1

如果你有keyboardType='numeric'键盘没有解雇的问题变得更加严重，因为没有办法解雇它。

用ScrollViewreplace视图不是一个正确的解决scheme，就像你有多个textInput或button，当键盘启动时点击它们只会closures键盘。

正确的方法是使用TouchableWithoutFeedback封装View并调用Keyboard.dismiss()

如果你有

 <View style={styles.container}> <TextInput keyboardType='numeric'/> </View> 

将其更改为

 import {Keyboard} from 'react-native' <TouchableWithoutFeedback onPress={Keyboard.dismiss}> <View style={styles.container}> <TextInput keyboardType='numeric'/> </View> </TouchableWithoutFeedback> 

编辑：您也可以创build高阶组件来解除键盘。

 import React from 'react'; import { TouchableWithoutFeedback, Keyboard } from 'react-native'; const DismissKeyboardHOC (Comp) => { return ({ children, ...props }) => ( <TouchableWithoutFeedback onPress={Keyboard.dismiss}> <Comp {...props}> {children} </Comp> </TouchableWithoutFeedback> ); }; 

简单地使用它就像这样

 const DismissKeyboardView = DismissKeyboardHOC(View) ... render() { <DismissKeyboardView> ... </DismissKeyboardView> } 

Answer 2

这只是更新和logging ！ 没有更多的隐藏技巧。

 import { Keyboard } from 'react-native' // Hide that keyboard! Keyboard.dismiss() 

https://github.com/facebook/react-native/pull/9925

Answer 3

使用这个自定义解雇

 var dismissKeyboard = require('dismissKeyboard'); var TestView = React.createClass({ render: function(){ return ( <TouchableWithoutFeedback onPress={dismissKeyboard}> <View /> </TouchableWithoutFeedback> ) } }) 

Answer 4

使用React Native的dismissKeyboard库。

我有一个非常类似的问题，觉得我是唯一没有得到它的。

ScrollViews

如果你有一个ScrollView ，或者像ListView一样从它inheritance的东西，你可以添加一个道具，这个道具会根据新闻或者拖动事件自动closures键盘。

道具是keyboardDismissMode ，可以具有none ， interactive或on-drag 。 你可以在这里阅读更多。

定期视图

如果你有一个ScrollView以外的东西，你想要任何按下closures键盘，你可以使用一个简单的TouchableWithoutFeedback并让onPress使用React Native的实用程序库dismissKeyboard来为你解除键盘。

在你的例子中，你可以做这样的事情：

 var DismissKeyboard = require('dismissKeyboard'); // Require React Native's utility library. // Wrap your view with a TouchableWithoutFeedback component like so. <View style={styles.container}> <TouchableWithoutFeedback onPress={ () => { DismissKeyboard() } }> <View> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} /> </View> </TouchableWithoutFeedback> </View> 

注意： TouchableWithoutFeedback只能有一个孩子，所以你需要将下面的所有东西都包装在一个View如上所示。

Answer 5

简单的答案是使用ScrollView而不是View，并将scrollable属性设置为false（可能需要调整一些样式）。

这样，当我点击其他地方的时候，键盘就被解雇了。 这可能是react-native的一个问题，但是tap事件似乎只能用ScrollViews来处理，这会导致所描述的行为。

编辑：感谢jllodra。 请注意，如果直接点击另一个Textinput，然后在外面，键盘仍然不会隐藏。

Answer 6

我是React品牌的新成员，在制作演示程序时遇到了同样的问题。 如果你使用onStartShouldSetResponder prop（ 在这里描述），你可以抓住一个普通的旧的React.View 。 好奇听到更多经验丰富的React-ers对这个策略的想法/如果有更好的策略，但是这对我来说是有效的：

 containerTouched(event) { this.refs.textInput.blur(); return false; } render() { <View onStartShouldSetResponder={this.containerTouched.bind(this)}> <TextInput ref='textInput' /> </View> } 

这里需要注意两点。 首先，如这里所讨论的，还没有办法结束所有子视图的编辑，所以我们必须直接引用TextInput来模糊它。 其次， onStartShouldSetResponder被其他可触摸控件拦截。 所以在容器视图中单击TouchableHighlight等（包括另一个TextInput ）将不会触发事件。 但是，单击容器视图中的Image仍然会closures键盘。

Answer 7

您可以像下面那样从react-native import键盘：

 import { Keyboard } from 'react-native'; 

并在你的代码中做类似的事情：

 render() { return ( <TextInput onSubmit={Keyboard.dismiss} /> ); } 

静态解雇（）

取消激活的键盘并移除焦点。

Answer 8

使用ScrollView而不是View并将keyboardShouldPersistTaps属性设置为false。

 <ScrollView style={styles.container} keyboardShouldPersistTaps={false}> <TextInput placeholder="Post Title" onChange={(event) => this.updateTitle(event.nativeEvent.text)} style={styles.default}/> </ScrollView> 

Answer 9

如果任何人需要一个如何解雇多行文本input在这里工作的例子你去！ 希望这有助于一些人在那里，文档没有描述一个方法来解散多行input，至less没有具体的参考如何做到这一点。 如果有人认为这应该是一个实际的post引用这个片段是为了让我知道，但仍然是一个小白实际张贴在堆栈上。

 import React, { Component } from 'react' import { Keyboard, TextInput, TouchableOpacity, View, KeyboardAvoidingView, } 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: '#000000', paddingLeft: 15, paddingTop: 10, fontSize: 18, }} multiline={true} textStyle={{ fontSize: '20', fontFamily: 'Montserrat-Medium' }} placeholder="Share your Success..." value={this.state.text} underlineColorAndroid="transparent" returnKeyType={'default'} /> </View> </TouchableOpacity> </KeyboardAvoidingView> ) } } 

Answer 10

 const dismissKeyboard = require('dismissKeyboard'); dismissKeyboard(); //dismisses it 

Answer 11

ScrollView for React Native 0.39更新用法

 <ScrollView scrollEnabled={false} contentContainerStyle={{flex: 1}} /> 

尽pipe两个TextInput框仍然存在问题。 例如。 在input之间切换时，用户名和密码表单现在会closures键盘。 在使用ScrollView时候，在TextInputs之间切换的时候，我们希望得到一些保持键盘活着的build议。

Answer 12

如果我没有弄错React Native的最新版本已经解决了能够通过敲出来closures键盘的问题。

Answer 13

我刚刚使用最新的React Native版本（0.4.2）进行了testing，并且在您点击其他地方时键盘被解散。

和FYI：你可以设置一个callback函数，当你把键盘分配给“onEndEditing”属性的时候执行。

Answer 14

如何在TextInput周围放置一个可触摸的组件？

 var INPUTREF = 'MyTextInput'; class TestKb extends Component { constructor(props) { super(props); } render() { return ( <View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'blue' }}> <View> <TextInput ref={'MyTextInput'} style={{ height: 40, borderWidth: 1, backgroundColor: 'grey' }} ></TextInput> </View> <TouchableWithoutFeedback onPress={() => this.refs[INPUTREF].blur()}> <View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'green' }} /> </TouchableWithoutFeedback> </View> ) } } 

Answer 15

https://facebook.github.io/react-native/docs/keyboard.html

使用

 Keyboard.dismiss(0); 

隐藏键盘。

Answer 16

在ScrollView使用keyboardShouldPersistTaps ，你可以传入“句柄”，它处理人们在使用ScrollView时所说的问题。 这是文档中关于使用“已处理”的说法： the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). 这是它被引用的地方。

Answer 17

如果你有keyboardType='numeric'键盘没有解雇的问题变得更加严重，因为没有办法解雇它。

用ScrollViewreplaceView不是一个正确的解决scheme，就好像你有多个文本input或button; 在键盘弹起的时候敲击它们只会closures键盘。

正确的方法是用TouchableWithoutFeedback封装View并调用。 这里的KeyBoard是一类react-native 。

Keyboard.dismissfunction用于解除键盘事件。

Answer 18

从react-native导入“键盘”到你的组件

运行keyboard.dismiss(); 隐藏键盘

Answer 19

使用键盘模块

 import { Keyboard } from 'react-native'; Keyboard.dismiss(); (or) onSubmitEditing={Keyboard.dismiss}