在react-native中隐藏键盘

如果我点击一个文本输入，我希望能够点击其他地方，以便再次取消键盘(不是返回键)。在我读过的所有教程和博客文章中，我没有发现一丁点关于这方面的信息。

这个基本的例子在模拟器中的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>
365426 次浏览
小开

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

这样，当我敲击其他地方时，键盘就会消失。这可能是react-native的一个问题，但点击事件似乎只被ScrollViews处理，这导致了上述行为。

编辑:感谢jllodra。请注意，如果你直接点击到另一个文本输入，然后在外面，键盘仍然不会隐藏。

小开

在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>
)
}
}
小开

如果我没有弄错的话，最新版本的React Native已经解决了这个问题，可以通过敲击键盘来消除键盘。

小开

我刚刚使用最新的React Native版本(0.4.2)进行了测试，当你点击其他地方时，键盘就会消失。

供你参考:你可以设置一个回调函数，当你解散键盘时，通过将它分配给“onenditing”道具来执行。

小开

使用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>
小开

我是React的新手，在制作演示应用时遇到了完全相同的问题。如果你使用onStartShouldSetResponder道具(描述为在这里)，你可以在普通的React.View上抓取触摸。很想听听更多经验丰富的反应者对这一策略的看法/如果有更好的策略，但这对我来说是有效的:

containerTouched(event) {
this.refs.textInput.blur();
return false;
}


render() {
<View onStartShouldSetResponder={this.containerTouched.bind(this)}>
<TextInput ref='textInput' />
</View>
}

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

小开

将此用于自定义撤销

var dismissKeyboard = require('dismissKeyboard');


var TestView = React.createClass({
render: function(){
return (
<TouchableWithoutFeedback
onPress={dismissKeyboard}>
<View />
</TouchableWithoutFeedback>
)
}
})
小开
最佳答案

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

用ScrollView替换View不是一个正确的解决方案，因为如果你有多个# eyz0或# eyz1，在键盘向上的时候点击它们只会让键盘消失。

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

编辑:你现在可以使用ScrollView和keyboardShouldPersistTaps='handled'来取消键盘时，点击不是由孩子(即。点击其他文本，输入或按钮)

如果你有

<View style=\{\{flex: 1}}>
<TextInput keyboardType='numeric'/>
</View>

改为

<ScrollView contentContainerStyle=\{\{flexGrow: 1}}
keyboardShouldPersistTaps='handled'
>
<TextInput keyboardType='numeric'/>
</ScrollView>

或

import {Keyboard} from 'react-native'


<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View style=\{\{flex: 1}}>
<TextInput keyboardType='numeric'/>
</View>
</TouchableWithoutFeedback>

编辑:你也可以创建一个高阶组件来取消键盘。

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)

就像这样简单地使用它

...
render() {
<DismissKeyboardView>
<TextInput keyboardType='numeric'/>
</DismissKeyboardView>
}

注意:需要accessible={false}来使输入表单继续通过VoiceOver访问。视障人士会感谢你的!

小开

使用React Native的Keyboard.dismiss()

更新后的答案

React Native在Keyboard上暴露了静态的dismiss()方法，因此更新的方法是:

import { Keyboard } from 'react-native';


Keyboard.dismiss()

原来的答案

使用React Native的dismissKeyboard库。

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

滚动视图

如果您有ScrollView，或任何从它继承的东西，如ListView，您可以添加一个道具，它将根据按下或拖动事件自动取消键盘。

道具是keyboardDismissMode，值可以是none、interactive或on-drag。你可以阅读更多关于在这里的内容。

常规的观点

如果你有ScrollView以外的东西，并且你想按任何键来取消键盘，你可以使用简单的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中，如上所示。

小开

这个刚刚更新了和记录!不再有隐藏的诡计。

import { Keyboard } from 'react-native'


// Hide that keyboard!
Keyboard.dismiss()

Github link

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

方法2;

感谢用户@ricardo-stuven指出这一点，还有另一种更好的方法来消除键盘，你可以在react原生文档中的例子中看到。

简单地导入Keyboard并调用它的方法dismiss()

小开

更新了ScrollView对React Native 0.39的使用

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

不过，两个TextInput框仍然存在问题。如。用户名和密码表单现在在切换输入时将忽略键盘。很想得到一些建议，以保持键盘在使用ScrollView时切换TextInputs。

小开

如果有人需要一个工作的例子，如何解散一个多行文本输入在这里ya !希望这能帮助一些人，文档没有描述一种方法来消除多行输入，至少没有具体的参考如何做到这一点。仍然是一个在堆栈上实际发帖的新手，如果有人认为这应该是对这个片段所写的实际帖子的引用，请告诉我。

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>
)
}
}
小开

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

小开

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

使用

Keyboard.dismiss(0);

隐藏键盘。

小开

你可以像下面这样从react-native 进口 keyboard:

import { Keyboard } from 'react-native';

在你的代码中可以是这样的:

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

静态解散()

解散活动键盘并移除焦点。

小开

在ScrollView使用

keyboardShouldPersistTaps="handled"

这个可以帮到你。

小开

Keyboard.dismiss()就可以了。但有时它可能会失去焦点，键盘将无法找到引用。最一致的方法是在textInput中添加ref=_ref，当你需要取消时执行_ref.blur()，当你需要恢复键盘时执行_ref.focus()。

小开

将组件包装在TouchableWithoutFeedback中可能会导致一些奇怪的滚动行为和其他问题。我更喜欢用View填充onStartShouldSetResponder属性来包装我最顶层的应用程序。这将允许我处理所有未处理的触摸，然后解散键盘。重要的是，由于handler函数返回false，所以触摸事件会像正常情况一样向上传播。

 handleUnhandledTouches(){
Keyboard.dismiss
return false;
}


render(){
<View style=\{\{ flex: 1 }} onStartShouldSetResponder={this.handleUnhandledTouches}>
<MyApp>
</View>
}
小开

首次导入键盘

import { Keyboard } from 'react-native'

然后在TextInput中添加Keyboard.dismiss到onSubmitEditing道具。你应该有这样的东西:

render(){
return(
<View>
<TextInput
onSubmitEditing={Keyboard.dismiss}
/>
</View>
)
}
小开

有很多方法可以处理这个问题，上面的答案不包括returnType，因为它当时不包括在react-native中。

1:你可以通过在ScrollView中包装你的组件来解决这个问题，默认情况下，如果我们按下某个地方，ScrollView会关闭键盘。但如果你想使用ScrollView但禁用此效果。你可以使用pointerEvent道具来scrollView # EYZ0。< / p >

2:如果你想关闭键盘按钮按下，你可以使用Keyboard从react-native

import{键盘}from 'react-native' 在那个按钮的onPress里面，你可以使用Keyboard.dismiss()'.

. key ()'.

. key ()'

3:你也可以在点击键盘上的返回键时关闭键盘， 注意:如果你的键盘类型是数字，你将没有返回键。 你可以通过给它一个道具returnKeyType to done来启用它。 或者你可以使用onSubmitEditing={Keyboard.dismiss}，它会在我们按下返回键时被调用。如果你想在失去焦点时解散键盘，你可以使用onBlur道具，onBlur = {Keyboard.dismiss}

小开

键盘模块用于控制键盘事件。

  • # EYZ0

  • 在渲染方法中添加以下代码。

    < p > <代码>渲染(){ TextInput onSubmitEditing={键盘。驳回}/祝辞; 代码}< / > < / p > < /李>

你可以使用-

Keyboard.dismiss()

解散活动键盘，并根据react本机文档删除焦点。

小开

这是我的解决方案键盘解散和滚动到点击TextInput(我使用的是ScrollView与keyboardDismissMode道具):

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;

用法:

render(){
return(
<DismissKeyboard>
<TextInput
style=\{\{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
</DismissKeyboard>
);
}
小开
有几种方法， 如果你控制事件像onPress，你可以使用:

import { Keyboard } from 'react-native'


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

如果你想关闭键盘时使用滚动:

<ScrollView keyboardDismissMode={'on-drag'}>
//content
</ScrollView>

更多的选项是当用户点击键盘外:

<KeyboardAvoidingView behavior='padding' style=\{\{ flex: 1}}>
//inputs and other content
</KeyboardAvoidingView>
小开

用以下内容包装整个组件:

import { TouchableWithoutFeedback, Keyboard } from 'react-native'


<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
...
</TouchableWithoutFeedback>

为我工作

小开

使用这个包react-native-keyboard-aware-scroll-view

使用该组件作为根组件

因为这个包react-native-keyboard-aware-scroll-view也有一个scrollView，你需要添加这个到它:

< p > <代码> & lt; KeyboardAwareScrollView keyboardShouldPersistTaps =“处理”比; & lt; ScrollView keyboardShouldPersistTaps = "处理"祝辞& lt; / ScrollView> & lt; / KeyboardAwareScrollView> < /代码> < / p >
小开

这是最简单的方法

import {Keyboard} from 'react-native'

然后使用函数Keyboard.dismiss()

这是所有。

下面是我代码的截图，这样你可以更快地理解。

从react native导入键盘。同时导入TouchableWithoutFeedback

现在用TouchableWithoutFeedback包装整个视图，onPress函数是keyboard.dismiss()

示例如下 # EYZ0 < / p >

这样，如果用户点击屏幕上的任何地方，不包括textInput字段，键盘将被解散。

小开

import {Keyboard} from 'react-native';

使用Keyboard.dismiss()隐藏你的键盘在任何onClick或onPress事件。

小开

我们可以在没有react-native反馈的情况下使用keyboard和tochable

const DismissKeyboard = ({ children }) => (
<TouchableWithoutFeedback
onPress={() => Keyboard.dismiss()}
>
{children}
</TouchableWithoutFeedback>
);

并这样使用它:

const App = () => (
<DismissKeyboard>
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="username"
keyboardType="numeric"
/>
<TextInput
style={styles.input}
placeholder="password"
/>
</View>
</DismissKeyboard>
);

我还用源代码解释了在这里。

小开

用于隐藏键盘 Keyboard.dismiss() inside TextInput.

小开

使用keyboard .dismiss()在任何时候解散键盘。

小开

onStartShouldSetResponder道具停止触摸事件传播到TouchableWithoutFeedback元素。

<TouchableWithoutFeedback onPress={...}>
<View>
<ScrollView>
<View onStartShouldSetResponder={() => true}>
// Scrollable content
</View>
</ScrollView>
</View>
</TouchableWithoutFeedback>
小开

使用ScrollView代替属性为keyboardShouldPersistTaps={"always"}的View。当我们点击屏幕内的任何地方时，它会隐藏键盘

<ScrollView keyboardShouldPersistTaps={"always"}>
<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>
</ScrollView>
小开

使用react-native中的KeyBoard API就可以了。

import { Keyboard } from 'react-native'


// Hide the keyboard whenever you want using !
Keyboard.dismiss()
小开

将TextInput的父组件View包装到Pressable组件中，然后将Keyboard. dismiss传递给onPress道具。因此，如果用户点击TextInput字段以外的任何地方，它将触发Keyboard. dismiss，导致TextInput字段失去焦点，键盘被隐藏。

<Pressable onPress={Keyboard.dismiss}>
<View>
<TextInput
multiline={true}
onChangeText={onChangeText}
value={text}
placeholder={...}
/>
</View>
</Pressable>

提交答案