在本机中隐藏键盘

【问题标题】：Hide keyboard in react-native在本机中隐藏键盘
【发布时间】：2015-06-23 11:47:35
【问题描述】：

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

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

【问题讨论】：

标签： reactjs react-native


【解决方案1】：

如果你有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 访问。视障人士会感谢你的！

【讨论】：

  • 这太好了，我唯一的评论是你可以在 RN 中使用官方的键盘 api，并调用 Keyboard.dismiss() 而不是调用一些 RN 内部实用程序 dismissKeyboard()。但目前两者都工作正常。
  • @PavleLekic 抱歉耽搁了，我用 HOC 方法更新了答案
  • 这很好用。我不得不对箭头函数的定义稍作修改，以消除 RN 中的意外标记错误：const DismissKeyboardHOC = (Comp) =&gt; {
  • 无论我尝试什么，我都无法让onPress 触发TouchableWithoutFeedback
  • 此解决方案有效，但请记住，您不能在 Touchable 组件的子组件中使用滑动手势。
【解决方案2】：

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

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

Github link

【讨论】：

  • 感谢您添加此内容。我希望你的答案能浮出水面。我几乎错过了它并使用了一个过时的解决方案。
  • Pinging @MrMuetze 将其更改为正确答案
  • 这不应该被选为最佳答案。该问题询问如何在敲击键盘外部时关闭键盘。这个答案只是提供了一个 API，而实际的最佳答案提供了一个可行的实现。
  • 你可以使用下一个库：KeyboardAwareScrollView
  • @jehna1 根据问题，这不是正确答案
【解决方案3】：

使用 React Native 的 Keyboard.dismiss()

更新答案

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

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

原答案

使用 React Native 的 dismissKeyboard 库。

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

滚动视图

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

prop 是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 中，如上所示。

【讨论】：

  • React Native 暴露了 Keyboard 上的静态 dismiss() 方法，所以更新后的方法是：import { Keyboard } from 'react-native'; Keyboard.dismiss()。
  • 我有一个键盘，因为我在专注于输入字段时重新加载了。在这种情况下，Keyboard.dismiss() 什么都不做，因为它的实现依赖于专注于输入，而我不再是。
  • @pstanton 那么你需要做什么才能关闭键盘？
  • 没有办法，我强行关闭！
  • 想限制键盘（不想关闭）键盘怎么办
【解决方案4】：

将此用于自定义解雇

var dismissKeyboard = require('dismissKeyboard');

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

  • 它适用于滚动视图，但我仍然遇到一些情况，我可以单击按钮以使用导航器更改视图，而键盘仍然停留在底部，必须手动单击返回键才能关闭它:(
  • 当您在 TextInput 外部点击时，键盘会隐藏，但如果（而不是在外部点击）您点击另一个 TextInput，最后点击外部，则键盘不会隐藏。在 0.6.0 上测试。
  • 我现在看到了不同的行为。在 TextInput 之外点击会隐藏键盘，即使我直接点击另一个 TextInput - 这是一个问题，因为您必须在另一个 TextInput 上点击两次才能输入它！叹。 （RN 0.19）
  • 您可以将 scrollable 设置为 true 并使用 keyboardShouldPersistTaps={'handled'} 和 keyboardDismissMode={'on-drag'} 来达到同样的效果
  • 只有滚动视图对我有用我不知道为什么，当我输入数字键盘时接受的答案会消失
【解决方案6】：

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

import { Keyboard } from 'react-native';

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

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

静态dismiss()

关闭活动键盘并移除焦点。

【讨论】：

  • 我不需要static dismiss()。我刚刚在我的 onSubmit 方法中添加了Keyboard.dismiss()（其中onSubmitEditing={() =&gt; {this.onSubmit()}})
【解决方案7】：

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

【讨论】：

  • 绝对有效。但正如你所说，我也很好奇这是否是正确的方法。希望他们尽快解决（github.com/facebook/react-native/issues/113）
  • 这对我很有用。我的滚动视图无法使用可触摸的方法！谢谢！
【解决方案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>

【讨论】：

  • 根据文档，keyboardShouldPersistTaps 属性在使用 ScrollView 时默认为 false。我刚刚将我的 react-native 更新到最新版本，切换到第二个 TextInput 的问题仍然存在。然后键盘是不可关闭的。你找到解决这个特定问题的方法了吗？
  • 文档不正确，但现已更新，请参阅此 PR：github.com/facebook/react-native/issues/2150
  • keyboardShouldPersistTaps 是做什么的？为什么它在这里相关？谢谢
  • 警告：'keyboardShouldPersistTaps={false}' 已弃用。改用'keyboardShouldPersistTaps="never"'
【解决方案9】：

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

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

【讨论】：

  • 感谢您的回答@Scottmas。由于您的“奇怪的滚动行为和其他问题”评论，我最终使用它而不是 TouchableWithoutFeedback。但如果我不是盲目相信你的话，你能详细说明你的评论吗？ :)
【解决方案10】：

最简单的方法

import {Keyboard} from 'react-native'

然后使用函数Keyboard.dismiss()

就是这样。

这是我的代码截图，方便大家更快理解。

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

这是一个例子

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

【讨论】：

    【解决方案11】：

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

    【讨论】：

    • 伙计们，问题仍然存在，但问题已经 4 年了（现在是 2019 年底）。 RN 现在非常简单易用。我们必须在我们可以解决这个问题的帮助下审查所有能力。让我们为这条评论点赞吧！
    【解决方案12】：

    如果有人需要一个工作示例来说明如何关闭多行文本输入，请看这里！希望这对那里的一些人有所帮助，文档根本没有描述一种消除多行输入的方法，至少没有关于如何做到这一点的具体参考。仍然是在堆栈上实际发布的菜鸟，如果有人认为这应该是对这个 sn-p 的实际帖子的引用，请告诉我。 

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

    【讨论】：

    • 如果我想在事件中限制键盘（不想关闭）键盘怎么办？
    【解决方案13】：

    更新了ScrollView 对React Native 0.39 的使用

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

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

    【讨论】：

    • 看来0.40 将keyboardShouldPersistTaps 从boolean 更新为enum，其可能值为“handled”，这应该可以解决此问题。
    【解决方案14】： 
    const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard(); //dismisses it

    方法#2；

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

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

    【讨论】：

    • 这是 Keyboard.dismiss 的完全等效项，因为已记录在案，所以更可取。 github.com/facebook/react-native/blob/…
    • 在我给出这个答案的时候，这没有记录。谢谢你提到它。我会更新我的答案。
    【解决方案15】：

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

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

    【讨论】：

    • 我正在调试“onEndEditing”回调，但之前从未触发过；我打算用新版本的 react native 来研究一下，谢谢你的建议
    【解决方案16】：

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

    【讨论】：

    • 您能指出他们的代码/文档的哪一部分是这样做的吗？我遇到了同样的问题，我非常感谢它为我指明了方向:)
    • 确认这仍然是 RN 0.19（最新）的问题。
    • 仍然是 RN 0.28 的问题
    【解决方案17】：

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

    【讨论】：

      【解决方案18】：

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

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

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

      为我工作

      【讨论】：

        【解决方案19】：

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

        • import { Keyboard } from 'react-native'

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

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

        你可以使用 -

        Keyboard.dismiss()

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

        【讨论】：

          【解决方案20】：

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

          使用

          Keyboard.dismiss(0);

          隐藏键盘。

          【讨论】：

            【解决方案21】：

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

            【讨论】：

            • 这对我有用！ （但是我必须将它添加到我的第三方库 react-native-keyboard-aware-scroll-view）。
            【解决方案22】：

            首先导入键盘

            import { Keyboard } from 'react-native'

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

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

            【讨论】：

            【解决方案23】：

            我们可以在没有 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。

            【讨论】：

              【解决方案24】：

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

              【讨论】：

                【解决方案25】：

                在ScrollView使用

                keyboardShouldPersistTaps="handled"

                这将完成你的工作。

                【讨论】：

                • 如果我想在事件中限制键盘（不想关闭）键盘怎么办？
                【解决方案26】：

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

                1：您可以通过将组件包装在 ScrollView 中来解决此问题，默认情况下，如果我们按下某个位置，则 ScrollView 会关闭键盘。但是如果您想使用 ScrollView 但禁用此效果。你可以使用 pointerEvent 道具来滚动视图 pointerEvents = 'none'.

                2：如果您想在按下按钮时关闭键盘，您可以使用Keyboard from react-native

                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}

                【讨论】：

                  【解决方案27】：

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

                  【讨论】：

                    【解决方案28】：

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

                    【讨论】：

                      【解决方案29】：

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

                      将该组件用作您的根组件

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

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

                      【讨论】：

                        【解决方案30】：

                        从“react-native”导入 {Keyboard}；

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

                        【讨论】：

                          猜你喜欢
                          • 1970-01-01
                          • 2020-08-06
                          • 2011-03-24
                          • 2010-10-01
                          • 1970-01-01
                          • 2017-03-19
                          • 2020-09-17
                          • 2014-03-21
                          • 1970-01-01
                          相关资源
                          最近更新 更多
                          热门标签
                          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode