在本地反应中隐藏键盘

Question

如果我点击文本输入,我希望能够点击其他地方以便再次解除键盘(尽管不是返回键).我在所阅读的所有教程和博客文章中都没有找到关于这方面的最细微信息.

这个基本示例对我来说仍然不适用于模拟器中的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替换View不是一个正确的解决方案,就像你有多个textInputs或buttons一样,在键盘启动时点击它们只会关闭键盘.

正确的方法是封装View with TouchableWithoutFeedback和调用Keyboard.dismiss()

编辑:您现在可以使用ScrollView与keyboardShouldPersistTaps='handled'只隐藏键盘当轻敲不被孩子处理(即攻上其他textInputs或按钮)

如果你有

<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

这只是更新和记录!没有更多隐藏的技巧.

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's Keyboard.dismiss()

更新的答案

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

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

原始答案

使用React Native的dismissKeyboard库.

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

ScrollViews

如果你有一个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如上所示.

Answer 5

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

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

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

Answer 6

我是React的新手,在制作演示应用时遇到了完全相同的问题.如果你使用onStartShouldSetResponder道具(这里描述),你可以抓住一个普通的旧React.View.很想知道更多有经验的React-ers对这个策略的想法/如果有更好的,但这对我有用:

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

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

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

Answer 7

您可以从react-native 导入 keyboard,如下所示:

import { Keyboard } from 'react-native';

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

render() {
    return (
      <TextInput
        onSubmit={Keyboard.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

使用react-native 中的KeyBoard API 可以解决这个问题。

import { Keyboard } from 'react-native'

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

Answer 10

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

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 11

我们可以使用键盘和触摸屏，而无需反应原生的反馈

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

我这里也用源码解释了。

Answer 12

更新了ScrollViewfor的用法React Native 0.39

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

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

Answer 13

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

方法#2;

感谢用户@ ricardo-stuven指出这一点,还有另一种更好的方法来解除键盘,你可以在react native docs 的例子中看到.

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

Answer 14

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

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

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

为我工作

Answer 15

View将作为 的父组件的组件包装TextInput在一个Pressable组件中，然后传递Keyboard. dismiss给onPressprop。因此，如果用户点击TextInput字段外的任何位置，都会触发Keyboard. dismiss，导致TextInput字段失去焦点并且键盘被隐藏。

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

Answer 16

将可触摸组件放在周围/旁边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>
        )
    }
}

Answer 17

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

Answer 18

我刚刚使用最新的React Native版本(0.4.2)对此进行了测试,当您点击其他地方时键盘被解除.

还有:你可以通过将键盘分配给"onEndEditing"道具来设置一个回调功能.

Answer 19

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

Answer 20

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

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

Answer 21

首先导入键盘

import { Keyboard } from 'react-native'

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

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

Answer 22

有几种方法可以控制事件，例如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 23

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

import {Keyboard} from 'react-native'

然后使用函数 Keyboard.dismiss()

就这样。

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

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

这是例子

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

Answer 24

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

Answer 25

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

用

Keyboard.dismiss(0);

隐藏键盘。

Answer 26

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

• import { Keyboard } from 'react-native'

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

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

您可以使用 -

Keyboard.dismiss()

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