在 react-native 中隐藏键盘

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

将 View 替换为 ScrollView 不是正确的解决方案，就像您有多个 textInput 或 button 一样，在键盘启动时点击它们只会关闭键盘。

正确的方法是用 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 访问。有视力障碍的人会感谢你的！

---

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

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

Github link

---

使用 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。您可以阅读有关该 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 只能有一个子节点，因此您需要将它下面的所有内容都包装在一个 View 中，如上所示。

---

将此用于自定义解雇

var dismissKeyboard = require('dismissKeyboard');

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

---

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

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

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

---

您可以从 react-native import keyboard 如下所示：

import { Keyboard } from 'react-native';

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

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

static dismiss() 关闭活动键盘并移除焦点。

---

我是 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 仍会关闭键盘。

---

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

---

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

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

---

最简单的方法来做到这一点

import {Keyboard} from 'react-native'

然后使用函数 Keyboard.dismiss()

就这样。

这是我的代码的屏幕截图，因此您可以更快地理解。

https://i.stack.imgur.com/3juyl.png

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

https://i.stack.imgur.com/ZWS5g.png

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

---

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

---

更新了 React Native 0.39 的 ScrollView 用法

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

虽然，两个 TextInput 框仍然存在问题。例如。现在，在输入之间切换时，用户名和密码表单将关闭键盘。希望获得一些建议，以在使用 ScrollView 时在 TextInputs 之间切换时保持键盘活动。

---

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

方法#2；

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

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

---

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

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

---

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

---

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

---

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

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

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

为我工作

---

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

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

在渲染方法中添加以下代码。 render() { return ; }

您可以使用 -

Keyboard.dismiss()

static dismiss() 关闭活动键盘并根据反应本机文档移除焦点。

---

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

利用

Keyboard.dismiss(0);

隐藏键盘。

---

首先导入键盘

import { Keyboard } from 'react-native'

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

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

---

我们可以在没有 react-native 反馈的情况下使用键盘和 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>
);

我还用源代码解释了 here。

---

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

---

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

---

在 ScrollView 使用

keyboardShouldPersistTaps="handled" 

这将完成你的工作。

---

有很多方法可以处理这个问题，上面的答案不包括 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：您也可以在单击键盘上的返回键时关闭键盘，注意：如果您的键盘类型是数字，您将没有返回键。因此，您可以通过给它一个 prop，returnKeyType 到 done 来启用它。或者你可以使用 onSubmitEditing={Keyboard.dismiss}，只要我们按回车键就会调用它。如果你想在失去焦点时关闭键盘，你可以使用 onBlur 属性，onBlur = {Keyboard.dismiss}

---

Keyboard.dismiss() 会这样做。但有时它可能会失去焦点，键盘将无法找到参考。最一致的做法是在 textInput 中添加 ref=_ref，当您需要关闭时执行 _ref.blur()，当您需要恢复键盘时执行 _ref.focus()。

---

这是我的键盘关闭和滚动到点击的 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>
   );
}

---

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

将该组件用作您的根组件

因为这个包 react-native-keyboard-aware-scroll-view 也有一个滚动视图，所以您需要将它添加到它：

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

---

从'react-native'导入{Keyboard}；

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

---