blocks|key|4515337|text|简单的答案是使用ScrollView而不是视图，并将scrollable属性设置为false+(尽管可能需要调整一些样式)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4515338|这样，当我点击其他地方时，键盘就会消失。这可能是原生反应的一个问题，但点击事件似乎只使用ScrollViews处理，这导致了所描述的行为。|4515339|编辑:感谢jllodra。请注意，如果您直接点击到另一个文本输入，然后在外面，键盘仍然不会隐藏。|4515340|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

The simple answer is to use a ScrollView instead of View and set the scrollable property to false (might need to adjust some styling though).

This way, the keyboard gets dismissed the moment I tap somewhere else. This might be an issue with react-native, but tap events only seem to be handled with ScrollViews which leads to the described behaviour.

Edit: Thanks to jllodra. Please note that if you tap directly into another Textinput and then outside, the keyboard still won't hide.

blocks|key|4515378|text|在TextInput周围/旁边放置一个可触摸的组件如何|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4515379|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>
++++++++)
++++}
}|code-block|syntax|javascript|4515380|entityMap^0|1|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

How about placing a touchable component around/beside the <code>TextInput</code>?

<pre class="lang-js prettyprint-override"><code>var INPUTREF = 'MyTextInput';

class TestKb extends Component {
 constructor(props) {
 super(props);
 }

 render() {
 return (
 &lt;View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'blue' }}&gt;
 &lt;View&gt;
 &lt;TextInput ref={'MyTextInput'}
 style={{
 height: 40,
 borderWidth: 1,
 backgroundColor: 'grey'
 }} &gt;&lt;/TextInput&gt;
 &lt;/View&gt;
 &lt;TouchableWithoutFeedback onPress={() =&gt; this.refs[INPUTREF].blur()}&gt;
 &lt;View 
 style={{ 
 flex: 1, 
 flexDirection: 'column', 
 backgroundColor: 'green' 
 }} 
 /&gt;
 &lt;/TouchableWithoutFeedback&gt;
 &lt;/View&gt;
 )
 }
}
</code></pre>

blocks|key|7909|text|如果我没记错的话，最新版本的React+Native已经解决了这个问题，可以通过敲击键盘来关闭键盘。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7910|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If i'm not mistaken the latest version of React Native has solved this issue of being able to dismiss the keyboard by tapping out.

blocks|key|7952|text|我刚刚使用最新的React+Native版本(0.4.2)测试了这一点，当你在其他地方点击时，键盘是无效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7953|仅供参考:你可以设置一个回调函数，当你关闭键盘时，通过将它赋值给"onEndEditing“属性来执行。|7954|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

I just tested this using the latest React Native version (0.4.2), and the keyboard is dismissed when you tap elsewhere.

And FYI: you can set a callback function to be executed when you dismiss the keyboard by assigning it to the "onEndEditing" prop.

blocks|key|7981|text|使用ScrollView代替View，并将keyboardShouldPersistTaps属性设置为false。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|7982|<ScrollView+style={styles.container}+keyboardShouldPersistTaps={false}>
++++<TextInput
++++++++placeholder="Post+Title"
++++++++onChange={(event)+=>+this.updateTitle(event.nativeEvent.text)}
++++++++style={styles.default}/>
+</ScrollView>|code-block|syntax|javascript|7983|entityMap^0|2|A|E|4|L|P|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

Use <code>ScrollView</code> instead of <code>View</code> and set the <code>keyboardShouldPersistTaps</code> attribute to false.

<pre class="lang-js prettyprint-override"><code>&lt;ScrollView style={styles.container} keyboardShouldPersistTaps={false}&gt;
 &lt;TextInput
 placeholder="Post Title"
 onChange={(event) =&gt; this.updateTitle(event.nativeEvent.text)}
 style={styles.default}/&gt;
 &lt;/ScrollView&gt;
</code></pre>

blocks|key|7997|text|使用此选项进行自定义解除|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7998|var+dismissKeyboard+=+require('dismissKeyboard');

var+TestView+=+React.createClass({
++++render:+function(){
++++++++return+(
++++++++++++<TouchableWithoutFeedback+
++++++++++++++++onPress={dismissKeyboard}>
++++++++++++++++<View+/>
++++++++++++</TouchableWithoutFeedback>
++++++++)
++++}
})|code-block|syntax|javascript|7999|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

use this for custom dismissal



<pre class="lang-js prettyprint-override"><code>var dismissKeyboard = require('dismissKeyboard');

var TestView = React.createClass({
 render: function(){
 return (
 &lt;TouchableWithoutFeedback 
 onPress={dismissKeyboard}&gt;
 &lt;View /&gt;
 &lt;/TouchableWithoutFeedback&gt;
 )
 }
})
</code></pre>

blocks|key|4515491|text|如果你有keyboardType='numeric'，键盘不可忽略的问题会变得更加严重，因为没有办法忽略它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4515492|将视图替换为ScrollView不是一个正确的解决方案，因为如果您有多个textInput或button，在键盘打开时轻敲它们只会关闭键盘。|4515493|正确的方法是用TouchableWithoutFeedback封装视图并调用Keyboard.dismiss()|4515494|编辑:您现在可以使用带有keyboardShouldPersistTaps='handled'的ScrollView，以便仅当子进程未处理轻击时取消键盘(即.点击其他textInputs或按钮)|4515495|如果你有|4515496|<View+style={{flex:+1}}>
++++<TextInput+keyboardType='numeric'/>
</View>|code-block|syntax|javascript|4515497|将其更改为|4515498|<ScrollView+contentContainerStyle={{flexGrow:+1}}
++keyboardShouldPersistTaps='handled'
>
++<TextInput+keyboardType='numeric'/>
</ScrollView>|4515499|或|4515500|import+{Keyboard}+from+'react-native'

<TouchableWithoutFeedback+onPress={Keyboard.dismiss}+accessible={false}>
++++<View+style={{flex:+1}}>
++++++++<TextInput+keyboardType='numeric'/>
++++</View>
</TouchableWithoutFeedback>|4515501|编辑:您还可以创建一个更高级别的组件来取消键盘。|4515502|import+React+from+'react';
import+{+TouchableWithoutFeedback,+Keyboard,+View+}+from+'react-native';

const+DismissKeyboardHOC+=+(Comp)+=>+{
++return+({+children,+...props+})+=>+(
++++<TouchableWithoutFeedback+onPress={Keyboard.dismiss}+accessible={false}>
++++++<Comp+{...props}>
++++++++{children}
++++++</Comp>
++++</TouchableWithoutFeedback>
++);
};
const+DismissKeyboardView+=+DismissKeyboardHOC(View)|4515503|只需像这样使用它|4515504|...
render()+{
++++<DismissKeyboardView>
++++++++<TextInput+keyboardType='numeric'/>
++++</DismissKeyboardView>
}|4515505|注意:要继续通过VoiceOver访问输入表单，需要accessible={false}。视障人士会感谢你的！|4515506|entityMap^0|4|M|0|10|9|1A|6|0|7|O|12|I|0|C|Z|1C|A|0|0|0|0|0|0|0|0|0|0|0|Q|I|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1K|8|@$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1P|8|@$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1U|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1V|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|6|7|1W|8|@]|D|@]|E|$]]|$1|U|3|V|5|P|7|1X|8|@]|D|@]|E|$Q|R]]|$1|W|3|X|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|P|7|1Z|8|@]|D|@]|E|$Q|R]]|$1|10|3|11|5|6|7|20|8|@]|D|@]|E|$]]|$1|12|3|13|5|P|7|21|8|@]|D|@]|E|$Q|R]]|$1|14|3|15|5|6|7|22|8|@]|D|@]|E|$]]|$1|16|3|17|5|P|7|23|8|@]|D|@]|E|$Q|R]]|$1|18|3|19|5|6|7|24|8|@$9|25|A|26|B|C]]|D|@]|E|$]]|$1|1A|3|-4|5|6|7|27|8|@]|D|@]|E|$]]]|1B|$]]

The problem with keyboard not dismissing gets more severe if you have <code>keyboardType='numeric'</code>, as there is no way to dismiss it.

Replacing View with ScrollView is not a correct solution, as if you have multiple <code>textInput</code>s or <code>button</code>s, tapping on them while the keyboard is up will only dismiss the keyboard.

Correct way is to encapsulate View with <code>TouchableWithoutFeedback</code> and calling <code>Keyboard.dismiss()</code>

EDIT: You can now use <code>ScrollView</code> with <code>keyboardShouldPersistTaps='handled'</code> to only dismiss the keyboard when the tap is not handled by the children (ie. tapping on other textInputs or buttons)

If you have



<pre class="lang-js prettyprint-override"><code>&lt;View style={{flex: 1}}&gt;
 &lt;TextInput keyboardType='numeric'/&gt;
&lt;/View&gt;
</code></pre>

Change it to

<pre class="lang-js prettyprint-override"><code>&lt;ScrollView contentContainerStyle={{flexGrow: 1}}
 keyboardShouldPersistTaps='handled'
&gt;
 &lt;TextInput keyboardType='numeric'/&gt;
&lt;/ScrollView&gt;
</code></pre>

or

<pre class="lang-js prettyprint-override"><code>import {Keyboard} from 'react-native'

&lt;TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}&gt;
 &lt;View style={{flex: 1}}&gt;
 &lt;TextInput keyboardType='numeric'/&gt;
 &lt;/View&gt;
&lt;/TouchableWithoutFeedback&gt;
</code></pre>

EDIT: You can also create a Higher Order Component to dismiss the keyboard.

<pre class="lang-js prettyprint-override"><code>import React from 'react';
import { TouchableWithoutFeedback, Keyboard, View } from 'react-native';

const DismissKeyboardHOC = (Comp) =&gt; {
 return ({ children, ...props }) =&gt; (
 &lt;TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}&gt;
 &lt;Comp {...props}&gt;
 {children}
 &lt;/Comp&gt;
 &lt;/TouchableWithoutFeedback&gt;
 );
};
const DismissKeyboardView = DismissKeyboardHOC(View)
</code></pre>

Simply use it like this

<pre class="lang-js prettyprint-override"><code>...
render() {
 &lt;DismissKeyboardView&gt;
 &lt;TextInput keyboardType='numeric'/&gt;
 &lt;/DismissKeyboardView&gt;
}
</code></pre>

NOTE: the <code>accessible={false}</code> is required to make the input form continue to be accessible through VoiceOver. Visually impaired people will thank you!

blocks|key|8061|text|这是刚刚更新的and+documented！不再有隐藏的把戏了。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|8062|import+{+Keyboard+}+from+'react-native'

//+Hide+that+keyboard!
Keyboard.dismiss()|code-block|syntax|javascript|8063|Github+link|8064|entityMap|0|LINK|mutability|MUTABLE|url|https://facebook.github.io/react-native/docs/keyboard|1|https://github.com/facebook/react-native/pull/9925^0|7|E|0|0|0|0|B|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

This just got updated <a href="https://facebook.github.io/react-native/docs/keyboard" rel="noreferrer">and documented</a>! No more hidden tricks.

<pre class="lang-js prettyprint-override"><code>import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()
</code></pre>
<a href="https://github.com/facebook/react-native/pull/9925" rel="noreferrer">Github link</a>

blocks|key|4515541|text|const+dismissKeyboard+=+require('dismissKeyboard');
dismissKeyboard();+//dismisses+it|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4515542|接近No#+2；|unstyled|4515543|感谢用户@ricardo-stuven指出了这一点，还有另一种更好的方法来消除键盘，你可以在react原生文档的example中看到它。|offset|length|4515544|简单地导入Keyboard并将其方法命名为dismiss()|style|CODE|4515545|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/facebook/react-native/blob/1490ab12ef156bf3201882eeabfcac18a1210352/Libraries/Components/Keyboard/Keyboard.js#L151^0|0|0|1K|7|0|0|5|8|L|9|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|F|7|12|8|@$I|13|J|14|M|N]|$I|15|J|16|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|F|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<pre><code>const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard(); //dismisses it
</code></pre>

Approach No# 2;

Thanks to user @ricardo-stuven for pointing this out, there is another better way to dismiss the keyboard which you can see in the <a href="https://github.com/facebook/react-native/blob/1490ab12ef156bf3201882eeabfcac18a1210352/Libraries/Components/Keyboard/Keyboard.js#L151" rel="nofollow noreferrer">example</a> in the react native docs.

Simple import <code>Keyboard</code> and call it's method <code>dismiss()</code>

blocks|key|4515576|text|更新了React+Native+0.39的ScrollView用法|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4515577|<ScrollView+scrollEnabled={false}+contentContainerStyle={{flex:+1}}+/>|code-block|syntax|javascript|4515578|尽管如此，两个TextInput盒仍然存在问题。例如：现在，当在输入之间切换时，用户名和密码表单将关闭键盘。我想得到一些建议，以保持键盘活动时，切换TextInputs，同时使用的ScrollView。|4515579|entityMap^0|3|H|L|A|0|0|7|9|22|A|2I|A|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$]]

Updated usage of <code>ScrollView</code> for <code>React Native 0.39</code>

<pre><code>&lt;ScrollView scrollEnabled={false} contentContainerStyle={{flex: 1}} /&gt;
</code></pre>

Although, there is still a problem with two <code>TextInput</code> boxes. eg. A username and password form would now dismiss the keyboard when switching between inputs. Would love to get some suggestions to keep keyboard alive when switching between <code>TextInputs</code> while using a <code>ScrollView</code>.

blocks|key|8146|text|如果有人需要一个如何消除多行文本输入的工作示例，可以在这里找到！希望这对一些人有所帮助，文档根本没有描述一种消除多行输入的方法，至少没有具体的参考说明。在堆栈上实际张贴仍然是一个新手，如果有人认为这应该是对这段代码编写的实际帖子的引用，请让我知道。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8147|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>
++++)
++}
}|code-block|syntax|javascript|8148|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If any one needs a working example of how to dismiss a multiline text input here ya go! Hope this helps some folks out there, the docs do not describe a way to dismiss a multiline input at all, at least there was no specific reference on how to do it. Still a noob to actually posting here on the stack, if anyone thinks this should be a reference to the actual post this snippet was written for let me know. 

<pre class="lang-js prettyprint-override"><code>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 (
 &lt;KeyboardAvoidingView
 style={{ flex: 1 }}
 behavior={this.state.behavior}
 &gt;
 &lt;TouchableOpacity onPress={this._keyboardDidHide}&gt;
 &lt;View&gt;
 &lt;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'}
 /&gt;
 &lt;/View&gt;
 &lt;/TouchableOpacity&gt;
 &lt;/KeyboardAvoidingView&gt;
 )
 }
}
</code></pre>

blocks|key|8177|text|在ScrollView中使用keyboardShouldPersistTaps，您可以传入"handled"，它解决了人们所说的使用ScrollView带来的问题。这就是文档中关于使用‘handled’的内容:引用了the+keyboard+will+not+dismiss+automatically+when+the+tap+was+handled+by+a+children,+(or+captured+by+an+ancestor).+Here。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|8178|entityMap|0|LINK|mutability|MUTABLE|url|https://facebook.github.io/react-native/docs/scrollview.html#keyboardShouldPersistTaps^0|1|A|E|P|30|35|66|4|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Using <code>keyboardShouldPersistTaps</code> in the <code>ScrollView</code> you can pass in "handled", which deals with the issues that people are saying comes with using the ScrollView. This is what the documentation says about using 'handled': <code>the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor).</code> <a href="https://facebook.github.io/react-native/docs/scrollview.html#keyboardShouldPersistTaps" rel="nofollow noreferrer">Here</a> is where it's referenced.

blocks|key|4515644|text|https://facebook.github.io/react-native/docs/keyboard.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4515645|使用|4515646|Keyboard.dismiss(0);|code-block|syntax|javascript|4515647|来隐藏键盘。|4515648|entityMap|0|LINK|mutability|MUTABLE|url^0|0|1M|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|4]]]]

<a href="https://facebook.github.io/react-native/docs/keyboard.html" rel="noreferrer">https://facebook.github.io/react-native/docs/keyboard.html</a>

Use 

<pre><code>Keyboard.dismiss(0);
</code></pre>

to hide the keyboard.

blocks|key|4515654|text|在ScrollView中使用|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4515655|keyboardShouldPersistTaps="handled"+|code-block|syntax|javascript|4515656|这将会完成你的工作。|4515657|entityMap^0|1|A|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

in <code>ScrollView</code> use 

<pre><code>keyboardShouldPersistTaps="handled" 
</code></pre>

This will do your job.

blocks|key|8201|text|Keyboard.dismiss()将做到这一点。但有时它可能会失去焦点，键盘将无法找到参考。最一致的方法是将ref=_ref放到textInput中，当您需要关闭时执行_ref.blur()，当您需要恢复键盘时执行_ref.focus()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|8202|entityMap^0|0|I|1J|8|2D|B|30|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

<code>Keyboard.dismiss()</code> will do it. But sometimes it may lose the focus and Keyboard will be unable to find the ref. The most consistent way to do is put a <code>ref=_ref</code> to the textInput, and do <code>_ref.blur()</code> when you need to dismiss, and <code>_ref.focus()</code> when you need to bring back the keyboard.

blocks|key|4515692|text|将组件包装在TouchableWithoutFeedback中可能会导致一些奇怪的滚动行为和其他问题。我更喜欢将最上面的应用程序包装在一个填充了onStartShouldSetResponder属性的View中。这将允许我处理所有未处理的触摸，然后关闭键盘。重要的是，由于处理函数返回false，所以触摸事件会像正常情况一样向上传播。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4515693|+handleUnhandledTouches(){
+++Keyboard.dismiss
+++return+false;
+}

+render(){
++++<View+style={{+flex:+1+}}+onStartShouldSetResponder={this.handleUnhandledTouches}>
+++++++<MyApp>
++++</View>
++}|code-block|syntax|javascript|4515694|entityMap^0|6|O|20|P|2S|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

Wrapping your components in a <code>TouchableWithoutFeedback</code> can cause some weird scroll behavior and other issues. I prefer to wrap my topmost app in a <code>View</code> with the <code>onStartShouldSetResponder</code> property filled in. This will allow me to handle all unhandled touches and then dismiss the keyboard. Importantly, since the handler function returns false the touch event is propagated up like normal. 

<pre><code> handleUnhandledTouches(){
 Keyboard.dismiss
 return false;
 }

 render(){
 &lt;View style={{ flex: 1 }} onStartShouldSetResponder={this.handleUnhandledTouches}&gt;
 &lt;MyApp&gt;
 &lt;/View&gt;
 }
</code></pre>

blocks|key|4515706|text|第一个导入键盘|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4515707|import+{+Keyboard+}+from+'react-native'|code-block|syntax|javascript|4515708|然后在您的TextInput中，将Keyboard.dismiss添加到onSubmitEditing属性。您应该拥有如下所示的内容：|offset|length|style|CODE|4515709|render(){
++return(
++++<View>
++++++<TextInput+
++++++++onSubmitEditing={Keyboard.dismiss}
+++++++/>
++++</View>
++)++
}|4515710|entityMap^0|0|0|5|9|H|G|10|F|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|P|$]]

First import Keyboard

<pre><code>import { Keyboard } from 'react-native'
</code></pre>

Then inside your <code>TextInput</code> you add <code>Keyboard.dismiss</code> to the <code>onSubmitEditing</code> prop. You should have something that looks like this: 

<pre><code>render(){
 return(
 &lt;View&gt;
 &lt;TextInput 
 onSubmitEditing={Keyboard.dismiss}
 /&gt;
 &lt;/View&gt;
 ) 
}
</code></pre>

blocks|key|4515715|text|有很多方法可以解决这个问题，上面的答案不包括returnType，因为它当时没有包含在react-native中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4515716|1:您可以通过将组件包装在ScrollView中来解决这个问题，默认情况下，如果我们按下某个地方，ScrollView会关闭键盘。但是，如果你想使用ScrollView，但要禁用这个效果。您可以使用pointerEvent+prop+to+scrollView+pointerEvents+=+'none'。|4515717|2:如果你想在按下按钮的时候关闭键盘，你可以使用react-native中的Keyboard|4515718|import+{+Keyboard+}+from+'react-native'+and+inside+onPress+of+that+button,+you+can+useKeyboard.dismiss()‘。|4515719|3:您也可以在单击键盘上的return键时关闭键盘，注意:如果您的键盘类型是数字，则不会有return键。因此，您可以通过给它一个道具来启用它，returnKeyType+to+done。或者你可以使用onSubmitEditing={Keyboard.dismiss}，只要我们按回车键，它就会被调用。如果你想在失去焦点时关闭键盘，你可以使用onBlur属性，onBlur+=+{Keyboard.dismiss}|4515720|entityMap^0|M|A|0|3N|M|0|O|C|12|8|0|0|2E|0|2H|4|2T|Y|51|R|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|O|$]]

There are many ways you could handle this, the answers above don't include <code>returnType</code> as it was not included in react-native that time.

1: You can solve it by wrapping your components inside ScrollView, by default ScrollView closes the keyboard if we press somewhere. But incase you want to use ScrollView but disable this effect. you can use pointerEvent prop to scrollView
<code>pointerEvents = 'none'</code>.

2: If you want to close the keyboard on a button press, You can just use <code>Keyboard</code> from <code>react-native</code>

<code>import { Keyboard } from 'react-native'
and inside onPress of that button, you can use</code>Keyboard.dismiss()'.

3: You can also close the keyboard when you click the return key on the keyboard,
NOTE: if your keyboard type is numeric, you won't have a return key.
So, you can enable it by giving it a prop, returnKeyType to <code>done</code>.
or you could use <code>onSubmitEditing={Keyboard.dismiss}</code>,It gets called whenever we press the return key. And if you want to dismiss the keyboard when losing focus, you can use onBlur prop, <code>onBlur = {Keyboard.dismiss}</code>

blocks|key|4515746|text|这是我的键盘关闭和滚动到点击的TextInput的解决方案(我正在使用带有keyboardDismissMode属性的ScrollView+)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4515747|import+React+from+'react';
import+{
++Platform,
++KeyboardAvoidingView,
++ScrollView
}+from+'react-native';

const+DismissKeyboard+=+({+children+})+=>+{
++const+isAndroid+=+Platform.OS+===+'android';
++const+behavior+=+isAndroid+?+false+:+'padding';

++return+(
++++<KeyboardAvoidingView
++++++enabled
++++++behavior={+behavior+}
++++++style={{+flex:+1}}
++++>
++++++<ScrollView
++++++++keyboardShouldPersistTaps={'always'}
++++++++keyboardDismissMode={'on-drag'}
++++++>
++++++++{+children+}
++++++</ScrollView>
++++</KeyboardAvoidingView>
++);
};

export+default+DismissKeyboard;|code-block|syntax|javascript|4515748|用法：|4515749|render(){
+++return(
+++++<DismissKeyboard>
+++++++<TextInput
++++++++style={{height:+40,+borderColor:+'gray',+borderWidth:+1}}
++++++++onChangeText={(text)+=>+this.setState({text})}
++++++++value={this.state.text}
++++++/>
+++++</DismissKeyboard>
+++);
}|4515750|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Here is my solution for Keyboard dismissing and scrolling to tapped TextInput (I am using ScrollView with keyboardDismissMode prop):

<pre><code>import React from 'react';
import {
 Platform,
 KeyboardAvoidingView,
 ScrollView
} from 'react-native';

const DismissKeyboard = ({ children }) =&gt; {
 const isAndroid = Platform.OS === 'android';
 const behavior = isAndroid ? false : 'padding';

 return (
 &lt;KeyboardAvoidingView
 enabled
 behavior={ behavior }
 style={{ flex: 1}}
 &gt;
 &lt;ScrollView
 keyboardShouldPersistTaps={'always'}
 keyboardDismissMode={'on-drag'}
 &gt;
 { children }
 &lt;/ScrollView&gt;
 &lt;/KeyboardAvoidingView&gt;
 );
};

export default DismissKeyboard;
</code></pre>

usage: 

<pre><code>render(){
 return(
 &lt;DismissKeyboard&gt;
 &lt;TextInput
 style={{height: 40, borderColor: 'gray', borderWidth: 1}}
 onChangeText={(text) =&gt; this.setState({text})}
 value={this.state.text}
 /&gt;
 &lt;/DismissKeyboard&gt;
 );
}

</code></pre>

blocks|key|4515788|text|有几种方法，如果你像onPress一样控制事件，你可以使用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4515789|import+{+Keyboard+}+from+'react-native'

onClickFunction+=+()+=>+{
+++++Keyboard.dismiss()
}|code-block|syntax|javascript|4515790|如果要在使用滚动时关闭键盘：|4515791|<ScrollView+keyboardDismissMode={'on-drag'}>
+++++//content
</ScrollView>|4515792|更多选项是当用户在键盘外单击时：|4515793|<KeyboardAvoidingView+behavior='padding'+style={{+flex:+1}}>
++++//inputs+and+other+content
</KeyboardAvoidingView>|4515794|entityMap^0|A|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|T|$]]

There are a few ways,
if you control of event like <code>onPress</code> you can use:

<pre><code>import { Keyboard } from 'react-native'

onClickFunction = () =&gt; {
 Keyboard.dismiss()
}
</code></pre>

if you want to close the keyboard when the use scrolling:

<pre><code>&lt;ScrollView keyboardDismissMode={'on-drag'}&gt;
 //content
&lt;/ScrollView&gt;
</code></pre>

More option is when the user clicks outside the keyboard:

<pre><code>&lt;KeyboardAvoidingView behavior='padding' style={{ flex: 1}}&gt;
 //inputs and other content
&lt;/KeyboardAvoidingView&gt;
</code></pre>

blocks|key|8275|text|使用以下命令包装整个组件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8276|import+{+TouchableWithoutFeedback,+Keyboard+}+from+'react-native'

<TouchableWithoutFeedback+onPress={()+=>+Keyboard.dismiss()}>
...
</TouchableWithoutFeedback>|code-block|syntax|javascript|8277|对我很管用|8278|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Wrap your whole component with:

<pre><code>import { TouchableWithoutFeedback, Keyboard } from 'react-native'

&lt;TouchableWithoutFeedback onPress={() =&gt; Keyboard.dismiss()}&gt;
...
&lt;/TouchableWithoutFeedback&gt;
</code></pre>

Worked for me

blocks|key|4515830|text|使用此包react-native-keyboard-aware-scroll-view|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4515831|使用该组件作为根组件|4515832|由于此包react-native-keyboard-aware-scroll-view也有一个scrollView，因此您需要将以下内容添加到其中：|4515833|<KeyboardAwareScrollView+keyboardShouldPersistTaps="handled">+++++++<ScrollView+keyboardShouldPersistTaps="handled"></ScrollView>+</KeyboardAwareScrollView>|4515834|entityMap^0|4|13|0|0|4|13|0|0|4C|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|M|$]]

use this package <code>react-native-keyboard-aware-scroll-view</code>

use that component as your root component

since this package <code>react-native-keyboard-aware-scroll-view</code> also have an scrollView you need to add this to it:

<code>&lt;KeyboardAwareScrollView keyboardShouldPersistTaps="handled"&gt;
 &lt;ScrollView keyboardShouldPersistTaps="handled"&gt;&lt;/ScrollView&gt;
&lt;/KeyboardAwareScrollView&gt;
</code>

blocks|key|8403|text|做到这一点的最简单方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8404|import+{Keyboard}+from+'react-native'|code-block|syntax|javascript|8405|然后使用函数Keyboard.dismiss()|offset|length|style|CODE|8406|就这样。|8407|下面是我的代码的截图，这样你就可以更快地理解。|8408|​|8409|📷|atomic|8410|8411|现在用TouchableWithoutFeedback包装整个视图，onPress函数是keyboard.dismiss()|8412|下面是示例|8413|8414|8415|这样，如果用户轻触屏幕上除textInput字段以外的任何位置，键盘将被清除。|8416|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/6aa51cb9e128934a65433c99a4710775.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/ce2a8d9fbe50a2688b656e3208501e55.png^0|0|0|6|I|0|0|0|0|0|1|0|0|0|3|O|18|I|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1G|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1H|8|@$I|1I|J|1J|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1K|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1L|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1M|8|@]|9|@]|A|$]]|$1|S|3|T|5|U|7|1N|8|@]|9|@$I|1O|J|1P|1|1Q]]|A|$]]|$1|V|3|R|5|6|7|1R|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1S|8|@$I|1T|J|1U|K|L]|$I|1V|J|1W|K|L]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1X|8|@]|9|@]|A|$]]|$1|10|3|T|5|U|7|1Y|8|@]|9|@$I|1Z|J|20|1|21]]|A|$]]|$1|11|3|R|5|6|7|22|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|23|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|24|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B|1C|-4]]|1D|$5|17|18|19|A|$1A|1E|1C|-4]]]]

The simplest way to do this
<pre><code>import {Keyboard} from 'react-native'
</code></pre>
and then use the function <code>Keyboard.dismiss()</code>
That's all.
Here is a screenshot of my code so you can understand faster.
<a href="https://i.stack.imgur.com/3juyl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3juyl.png" alt="Import Keyboard from react native. Also import TouchableWithoutFeedback" /></a>
Now wrap the entire view with <code>TouchableWithoutFeedback</code> and onPress function is <code>keyboard.dismiss()</code>
Here is the example
<a href="https://i.stack.imgur.com/ZWS5g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZWS5g.png" alt="TouchableWithoutFeedback and Keyboard.dismiss()" /></a>
In this way if user tap on anywhere of the screen excluding textInput field, keyboard will be dismissed.

blocks|key|8473|text|从‘react-native’导入{Keyboard}；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8474|在任何onClick或onPress事件中使用Keyboard.dismiss()隐藏键盘。|offset|length|style|CODE|8475|entityMap^0|0|N|I|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

import {Keyboard} from 'react-native';
use <code>Keyboard.dismiss()</code> to hide your keyboard in any onClick or onPress event.

blocks|key|4516016|text|下面给出两种类型的隐藏键盘。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4516017|输入:1如果您没有使用滚动视图，那么只需导入键盘并添加Keyboard.dismiss().，这是正确的实现方式。|offset|length|style|CODE|4516018|类型:2如果您使用的是滚动视图，则只需|4516019|<ScrollView+contentContainerStyle={{flex:+1}}+keyboardShouldPersistTaps='handled'>
++<TextInput+/>
</ScrollView>|code-block|syntax|javascript|4516020|这才是正确的实现方式。|4516021|entityMap^0|0|R|J|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|X|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Below given two types of hiding keyboard.
Type: 1
if you are not using a scroll view then simply Import keyboard and Add <code>Keyboard.dismiss().</code>
this is the correct way of implementation.
Type: 2
if you are using a scroll view then simply
<pre><code>&lt;ScrollView contentContainerStyle={{flex: 1}} keyboardShouldPersistTaps='handled'&gt;
 &lt;TextInput /&gt;
&lt;/ScrollView&gt;
</code></pre>
this is the correct way of implementation.

blocks|key|4516050|text|我们可以使用键盘和keyboard，而不需要来自原生反应的反馈。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4516051|const+DismissKeyboard+=+({+children+})+=>+(
++<TouchableWithoutFeedback
++++onPress={()+=>+Keyboard.dismiss()}
++>
++++{children}
++</TouchableWithoutFeedback>
);|code-block|syntax|javascript|4516052|并这样使用它：|4516053|const+App+=+()+=>+(
++<DismissKeyboard>
++++<View+style={styles.container}>
++++++<TextInput
++++++++style={styles.input}
++++++++placeholder="username"
++++++++keyboardType="numeric"
++++++/>
++++++<TextInput
++++++++style={styles.input}
++++++++placeholder="password"
++++++/>
++++</View>
++</DismissKeyboard>
);|4516054|我还用源代码解释了here。|offset|length|4516055|entityMap|0|LINK|mutability|MUTABLE|url|https://www.youtube.com/watch?v=CwnIVdleLkU&t=11s^0|0|0|0|0|9|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

We can use keyboard and tochablewithoutfeedback from react-native
<pre><code>const DismissKeyboard = ({ children }) =&gt; (
 &lt;TouchableWithoutFeedback
 onPress={() =&gt; Keyboard.dismiss()}
 &gt;
 {children}
 &lt;/TouchableWithoutFeedback&gt;
);
</code></pre>
And use it in this way:
<pre><code>const App = () =&gt; (
 &lt;DismissKeyboard&gt;
 &lt;View style={styles.container}&gt;
 &lt;TextInput
 style={styles.input}
 placeholder=&quot;username&quot;
 keyboardType=&quot;numeric&quot;
 /&gt;
 &lt;TextInput
 style={styles.input}
 placeholder=&quot;password&quot;
 /&gt;
 &lt;/View&gt;
 &lt;/DismissKeyboard&gt;
);
</code></pre>
I also explained <a href="https://www.youtube.com/watch?v=CwnIVdleLkU&amp;t=11s" rel="nofollow noreferrer">here</a> with source code.

blocks|key|4516081|text|对于隐藏键盘，在TextInput中使用Keyboard.dismiss()。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4516082|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

For hide keyboard use
Keyboard.dismiss() inside TextInput.

blocks|key|8641|text|使用Keyboard.dismiss()可随时关闭键盘。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8642|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Use Keyboard.dismiss() to dismiss keyboard at any time.

blocks|key|8709|text|onStartShouldSetResponder属性停止向TouchableWithoutFeedback元素传播触摸事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8710|<TouchableWithoutFeedback+onPress={...}>
++<View>
++++<ScrollView>
++++++<View+onStartShouldSetResponder={()+=>+true}>
++++++++//+Scrollable+content
++++++</View>
++++</ScrollView>
++</View>
</TouchableWithoutFeedback>|code-block|syntax|javascript|8711|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The onStartShouldSetResponder prop stops the touch event propagation towards the TouchableWithoutFeedback element.
<pre><code>&lt;TouchableWithoutFeedback onPress={...}&gt;
 &lt;View&gt;
 &lt;ScrollView&gt;
 &lt;View onStartShouldSetResponder={() =&gt; true}&gt;
 // Scrollable content
 &lt;/View&gt;
 &lt;/ScrollView&gt;
 &lt;/View&gt;
&lt;/TouchableWithoutFeedback&gt;
</code></pre>

If I tap onto a textinput, I want to be able to tap somewhere else in order to dismiss the keyboard again (not the return key though). I haven't found the slightest piece of information concerning this in all the tutorials and blog posts that I read.
This basic example is still not working for me with react-native 0.4.2 in the Simulator. Couldn't try it on my iPhone yet.

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

Hide keyboard in react-native

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如果我点击一个文本输入，我希望能够点击其他地方，以便再次关闭键盘(而不是return键)。在我读过的所有教程和博客文章中，我都没有找到任何关于这方面的信息。这个基本的例子仍然不适用于我在模拟器中使用react-native 0.4.2。还不能在我的iPhone上试用。<View style={styles.contai...

问在react-native中隐藏键盘
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在react-native中隐藏键盘EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在react-native中隐藏键盘
EN