在 react-native 中隐藏键盘

Question

如果我点击文本输入，我希望能够点击其他地方以再次关闭键盘（尽管不是 return 键）。在我阅读的所有教程和博客文章中，我都没有找到与此相关的丝毫信息。

这个基本示例仍然不适用于模拟器中的 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

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

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

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

Answer 2

在 TextInput 中放置一个可触摸组件 around/beside 怎么样？

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 3

如果我没记错的话，最新版本的 React Native 已经解决了这个可以通过点击关闭键盘的问题。

Answer 4

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

仅供参考：您可以通过将键盘分配给 "onEndEditing" 属性来设置在关闭键盘时执行的回调函数。

Answer 5

使用 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 6

我是 React 的新手运行，并且运行在制作演示应用程序时遇到了完全相同的问题。如果您使用 onStartShouldSetResponder 道具（描述为 here），您可以触摸一个普通的旧 React.View。很想听听更有经验的 React-ers 对此策略的想法/如果有更好的策略，但这对我有用：

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

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

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

Answer 7

将此用于自定义解雇

var dismissKeyboard = require('dismissKeyboard');

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

Answer 8

如果您有keyboardType='numeric'，键盘无法关闭的问题会变得更加严重，因为无法关闭它。

用 ScrollView 替换 View 不是正确的解决方案，因为如果您有多个 textInputs 或 buttons，在键盘启动时点击它们只会关闭键盘。

正确的做法是用TouchableWithoutFeedback封装View然后调用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 访问输入表单。视障人士会感谢你！

Answer 9

使用 React Native 的 `Keyboard.dismiss()`

更新答案

React Native 在Keyboard上暴露了静态dismiss()方法，所以更新后的方法是：

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

原答案

使用 React Native 的 `dismissKeyboard` 库。

我遇到了一个非常相似的问题，感觉只有我没有弄明白。

滚动视图

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

道具是keyboardDismissMode and can have a value of none, interactive or on-drag. You can read more on that here.

常规浏览量

如果您有 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只能有一个child，所以你需要把它下面的所有东西都包在一个View中，如上所示。

Answer 10

刚刚更新 and documented！没有更多的隐藏技巧。

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

Github link

Answer 11

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

方法#2；

感谢用户@ricardo-stuven 指出这一点，还有另一种更好的关闭键盘的方法，您可以在 react native 文档的 example 中看到。

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

Answer 12

更新了 ScrollView 对 React Native 0.39

的用法

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

不过，两个TextInput盒子还是有问题。例如。在输入之间切换时，用户名和密码表单现在会关闭键盘。希望在使用 ScrollView.

时在 TextInputs 之间切换时获得一些建议以保持键盘活动

Answer 13

如果有人需要一个如何关闭多行文本输入的工作示例，请点击此处！希望这对那里的一些人有帮助，文档根本没有描述消除多行输入的方法，至少没有关于如何做的具体参考。如果有人认为这应该是对实际 post 的引用，那么实际上 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 14

在 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 是它被引用的地方。

Answer 15

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

使用

Keyboard.dismiss(0);

隐藏键盘。

Answer 16

您可以从 react-native 导入 keyboard，如下所示：

import { Keyboard } from 'react-native';

在您的代码中可能是这样的：

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

static dismiss()

Dismisses the active keyboard and removes focus.

Answer 17

在ScrollView中使用

keyboardShouldPersistTaps="handled"

这会完成你的工作。

Answer 18

Keyboard.dismiss() 会做到的。但有时它可能会失去焦点，键盘将无法找到参考。最一致的做法是将 ref=_ref 放在 textInput 中，然后在需要关闭时执行 _ref.blur()，在需要带回键盘时执行 _ref.focus()。

Answer 19

将您的组件包装在 TouchableWithoutFeedback 中可能会导致一些奇怪的滚动行为和其他问题。我更喜欢将我最上面的应用程序包装在 View 中，并填充了 onStartShouldSetResponder 属性。这将允许我处理所有未处理的触摸，然后关闭键盘。重要的是，由于处理函数 returns false 触摸事件像往常一样向上传播。

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

Answer 20

首先导入键盘

import { Keyboard } from 'react-native'

然后在 TextInput 中将 Keyboard.dismiss 添加到 onSubmitEditing 属性。你应该有这样的东西：

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

Answer 21

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

1: 你可以通过将你的组件包裹在 ScrollView 中来解决它，默认情况下，如果我们按下某个地方，ScrollView 会关闭键盘。但是如果您想使用 ScrollView 但禁用此效果。你可以使用 pointerEvent 属性来滚动视图 pointerEvents = 'none'.

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

中的 Keyboard

import { Keyboard } from 'react-native' and inside onPress of that button, you can useKeyboard.dismiss()'.

3：点击键盘上的return键也可以关闭键盘，注意：如果您的键盘类型是数字，您将没有 return 键。因此，您可以通过给它一个属性 returnKeyType 到 done 来启用它。或者你可以使用 onSubmitEditing={Keyboard.dismiss}，只要我们按下 return 键，它就会被调用。如果你想在失去焦点时关闭键盘，你可以使用 onBlur 属性，onBlur = {Keyboard.dismiss}

Answer 22

Keyboard模块用于控制键盘事件

import { Keyboard } from 'react-native'
在渲染方法中添加以下代码。

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

你可以使用-

Keyboard.dismiss()

static dismiss() Dismisses the active keyboard and removes focus as per react native documents.

Answer 23

这是我的键盘关闭和滚动到点击的 TextInput 的解决方案（我正在使用带有 keyboardDismissMode 属性的 ScrollView）：

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

Answer 24

有几种方法，如果你控制像 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>

Answer 25

用以下方式包装整个组件：

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

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

为我工作

Answer 26

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

将该组件用作您的根组件

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

<KeyboardAwareScrollView keyboardShouldPersistTaps="handled"> <ScrollView keyboardShouldPersistTaps="handled"></ScrollView> </KeyboardAwareScrollView>

Answer 27

最简单的方法

import {Keyboard} from 'react-native'

然后使用函数Keyboard.dismiss()

就这些了。

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

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

这是例子

这样，如果用户点击屏幕上除 textInput 字段以外的任何地方，键盘将被关闭。

Answer 28

从'react-native'导入{键盘}；

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

Answer 29

我们可以使用键盘和遥控器而无需来自 react-native

的反馈

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

我也用源码解释了here

Answer 30

隐藏键盘使用 Keyboard.dismiss() 在 TextInput 中。

Answer 31

随时使用 Keyboard.dismiss() 关闭键盘。

Answer 32

onStartShouldSetResponder 属性停止向 TouchableWithoutFeedback 元素传播触摸事件。

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

Answer 33

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

Answer 34

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

import { Keyboard } from 'react-native'

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

Answer 35

将 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>

在 react-native 中隐藏键盘

Hide keyboard in react-native

reactjs

react-native

使用 React Native 的 `Keyboard.dismiss()`

更新答案

原答案

使用 React Native 的 `dismissKeyboard` 库。

滚动视图

常规浏览量

static dismiss()

在 react-native 中隐藏键盘

Hide keyboard in react-native

reactjs

react-native

使用 React Native 的 Keyboard.dismiss()

更新答案

原答案

使用 React Native 的 dismissKeyboard 库。

滚动视图

常规浏览量

static dismiss()

使用 React Native 的 `Keyboard.dismiss()`

使用 React Native 的 `dismissKeyboard` 库。