在本地反应中隐藏键盘

Question

如果我点击textinput，我希望能够点击其他地方以便再次关闭键盘（尽管不是返回键）。在我阅读的所有教程和博客文章中，我都没有找到关于这一点的最细微的信息。

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

如果你有keyboardType='numeric'，键盘没有消失的问题会更严重，因为没有办法解雇它。

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

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

编辑：您现在可以使用ScrollView与keyboardShouldPersistTaps='handled'仅在儿童未处理点击时解除键盘（即点击其他textInput或按钮）

如果你有

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

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

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

https://github.com/facebook/react-native/pull/9925

Answer 3

将此用于自定义解雇

var dismissKeyboard = require('dismissKeyboard');

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

Answer 4

使用React Native的Keyboard.dismiss()

更新答案

React Native在dismiss()上公开了静态Keyboard方法，因此更新的方法是：

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

原始答案

使用React Native的dismissKeyboard库。

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

ScrollViews

如果您有ScrollView，或者像ListView那样继承了none的任何内容，您可以添加一个支柱，根据按下或拖动事件自动关闭键盘。

道具为keyboardDismissMode，其值可以为interactive，on-drag或ScrollView。您可以在here上阅读更多内容。

常规视图

如果您有TouchableWithoutFeedback以外的其他内容，并且您希望有任何按键来关闭键盘，则可以使用简单的onPress并让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> 使用React Native的实用程序库dismissKeyboard为你解雇键盘。

在您的示例中，您可以执行以下操作：

TouchableWithoutFeedback

注意：View只能有一个孩子，因此您需要将其下方的所有内容包装在一个void ShortestWord(std::string const& text) { std::stringstream ss(text); std::vector<std::string> v(std::istream_iterator<std::string>(ss), {}); auto min = std::min_element(v.begin(), v.end(), [] (auto& lhs, auto& rhs) { return lhs.size() < rhs.size(); }); auto p = std::make_pair(*min, min->size()); std::cout << "Shortest Word: \"" << p.first << "\"\n"; std::cout << "Word Length: " << p.second << '\n'; } 中，如上所示。

Answer 5

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

这样，键盘在我点击其他地方的那一刻就被解雇了。这可能是react-native的一个问题，但tap事件似乎只能用ScrollViews处理，这会导致所描述的行为。

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

Answer 6

我是React的新手，在制作演示应用时遇到了完全相同的问题。如果您使用onStartShouldSetResponder道具（描述为here），则可以抓取普通旧版React.View。很想听听更有经验的React-ers＆＃39;关于这个策略的想法/如果有更好的策略，但这对我有用：

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

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

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

Answer 7

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

import { Keyboard } from 'react-native';

并在您的代码中执行以下操作：

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

  

static dismiss（）

     

取消激活的键盘并移除焦点。

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

Answer 9

如果有人需要一个如何解除多行文字输入的工作示例，那就去吧！希望这能帮助那里的一些人，文档根本没有描述解除多行输入的方法，至少没有具体的参考如何去做。如果有人认为这应该是对这个片段的实际帖子的引用仍然是一个菜鸟，请写信告诉我。

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 10

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

方法＃2;

感谢用户@ ricardo-stuven指出这一点，还有另一种更好的解雇键盘的方法，你可以在本地文档的example中看到。

简单导入Keyboard并将其命名为dismiss()

Answer 11

更新了ScrollView

的React Native 0.39用法

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

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

Answer 12

如果我没弄错的话，最新版本的React Native已经解决了这个能够通过点击解雇键盘的问题。

Answer 13

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

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

和FYI：您可以设置一个回调函数，当您通过将键盘分配给“onEndEditing”道具来解除键盘时执行。

Answer 15

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

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

Answer 16

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

使用

Keyboard.dismiss(0);

隐藏键盘。

Answer 17

最简单的方法

import {Keyboard} from 'react-native'

，然后使用功能Keyboard.dismiss()

仅此而已。

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

现在使用TouchableWithoutFeedback包装整个视图，并且onPress函数是keyboard.dismiss（）

这里是例子

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

Answer 18

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

• import { Keyboard } from 'react-native'

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

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

您可以使用-

Keyboard.dismiss()

  

static dismiss（）根据反应本机文档关闭活动键盘并移开焦点。

Answer 19

在keyboardShouldPersistTaps中使用ScrollView，您可以传入“已处理”，其中涉及人们使用ScrollView提出的问题。这就是文档中关于使用“处理”的说法：the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). Here是引用它的位置。

Answer 20

首次导入键盘

import { Keyboard } from 'react-native'

然后在TextInput内部将Keyboard.dismiss添加到onSubmitEditing道具中。您应该具有如下所示的内容：

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

Answer 21

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

<!DOCTYPE html>
<html>

    <head>
        <title>Marzuq's Bio</title>
    </head>

    <style type="text/css">
        body{
            background-color: rgb(5,113,176);
            font-family: arial;
            font-size: 15px;
        }
        h1{
            background-color: rgb(24,48,100);
            color: #009999;
            font-size: 2em;
        }
        h2{
            background-color: rgb(24,48,100);
            color:#009999;
        }
        img{
            filter: grayscale(1);
            width: 150px;
        }
        .Scroll-Paragraph {
            border:blue 8px solid;
            width:30%;
            padding: 8px;
            max-height:100px;
            overflow-y:scroll;
            overflow-x:hidden;
        }
        .wrap-around img {
           float:left;
        }



    </style>

    <body>
        <h1>Marzuq Mir</h1>
        <ul>
            Home|About Me|More
        </ul>
        <h1><b>Journey Through The Life of Marzuq</b></h1>
        
        <div class="Scroll Paragraph"><h2>All About Marzuq Mir</h2>
        <div class="wrap-around">
                <img src="Marzuq2.jpg"alt="A picture of Marzuq"/>
                
                <div class="Scroll-Paragraph"><p>My Name is Marzuq Mir. I was born on November 11, 1980. I am an aspiring robot programmer with plans to go to MIT. I have an amazing mother and father and a loving brother. I currently go to middle school and i am gud at math. I love to play games on my nintendo and spend my time running around the backyard of our mansion in upstate virginia. When I am bored from playing video games I go to my personal olympic sized pool and swim. After cooling off I read a book and draw up blueprints for my future peace keeping robots which I hope will earn me the nobel peace prize.Finally to end the day I ride my BMX bike around the park while my dad rides with his Harley Davidson. My role model is Biil Gates. Microsoft is his crowning acheivement but in my heart I know the acheivement that I gain from my robots will be comporable to that of Bill Gates. I might even become a multi biilionare and if I am lucky the worlds first multi-trillionare.</p></div>
            <div class=:Scroll-Paragrah><h2>
            My Favorite Foods to Eat
          </h2>
            <div class="Scroll-Paragrah"><UL>
                <br><li>Steak</li>
                <br><li>Mash Potatoes</li>
                <br><li>Chicken</li>
                </div>
            </UL>
            </div>
    </body>





</html>

为我工作

Answer 22

在ScrollView中使用

keyboardShouldPersistTaps="handled" 

这将完成你的工作。

Answer 23

您可以通过多种方法来处理此问题，上面的答案不包含returnType，因为该时间本来不包含在本机中。

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

2：如果要在按下按钮时关闭键盘，则只能使用Keyboard中的react-native

import { Keyboard } from 'react-native' and inside onPress of that button, you can use Keyboard.dismiss（）'。

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

Answer 24

这是我的解决方案，用于消除键盘并滚动到轻击的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>
   );
}

Answer 25

尝试keyboard.dismiss()。它对我有用

Answer 26

使用此软件包.Select (order => order.ToOrderViewModel()

使用该组件作为您的根组件

由于此软件包react-native-keyboard-aware-scroll-view还具有一个scrollView，因此需要将其添加到其中：

react-native-keyboard-aware-scroll-view

Answer 27

Keyboard.dismiss()会这样做。但有时它可能失去焦点，键盘将无法找到参考。最一致的方法是将ref=_ref添加到textInput，并在需要解除时执行_ref.blur()，并在需要重新启动键盘时执行_ref.focus()。

Answer 28

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

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

Answer 29

以下给出了两种隐藏键盘。

类型：1 如果您不使用滚动视图，则只需导入键盘并添加Keyboard.dismiss(). 这是正确的实施方式。

类型：2 如果您使用的是滚动视图，则只需

<ScrollView contentContainerStyle={{flex: 1}} keyboardShouldPersistTaps='handled'>
  <TextInput />
</ScrollView>

这是正确的实现方式。

Answer 30

我们可以使用react-native的键盘和tochable，而无需反馈

    { 
    "studentName": "test_filter",
    "marks":"['10','20']",
    "gender":"M",
    "mobileNumber": "" 
   }

并以这种方式使用它：

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

我还用源代码解释了here。

Answer 31

用于隐藏键盘 TextInput内的Keyboard.dismiss（）。