在react-native中隐藏键盘

如果我点击一个文本输入，我希望能够点击其他地方，以便再次取消键盘(不是返回键)。在我读过的所有教程和博客文章中，我没有发现一丁点关于这方面的信息。

这个基本的例子在模拟器中的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>

当前回答

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

方法2;

感谢用户@ricardo-stuven指出这一点，还有另一种更好的方法来消除键盘，你可以在react原生文档的例子中看到。

简单地导入键盘并调用它的方法dismiss()

2016-10-07 12:30:58

其他回答

onStartShouldSetResponder道具停止触摸事件传播到TouchableWithoutFeedback元素。

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

2021-11-25 05:53:03

将此用于自定义撤销

var dismissKeyboard = require('dismissKeyboard');

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

2015-11-06 06:36:35

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

1:你可以通过在ScrollView中包装你的组件来解决这个问题，默认情况下，如果我们按下某个地方，ScrollView会关闭键盘。但如果你想使用ScrollView但禁用此效果。你可以使用pointerEvent道具来scrollView pointerEvents = 'none'。

2:如果你想关闭键盘按钮按下，你可以使用键盘从反应本机

import {Keyboard} from 'react-native' 在那个按钮的onPress里面，你可以使用keyboard .dismiss()'。

3:你也可以在点击键盘上的返回键时关闭键盘，注意:如果你的键盘类型是数字，你将没有返回键。你可以通过给它一个道具returnKeyType来启用它。或者你可以使用onSubmitEditing={键盘。当我们按回车键时，它就会被调用。如果你想在失去焦点时忽略键盘，你可以使用onBlur prop, onBlur = {keyboard .dismiss}

2018-12-15 18:07:21

import {Keyboard} from 'react-native';

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

2020-09-20 19:10:15

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

2019-08-12 15:15:21

在react-native中隐藏键盘

推荐文章

最新文章

标签