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

当前回答

import {Keyboard} from 'react-native';

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

2020-09-20 19:10:15

其他回答

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

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

编辑:感谢jllodra。请注意，如果你直接点击到另一个文本输入，然后在外面，键盘仍然不会隐藏。

2015-04-21 12:04:32

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

import {Keyboard} from 'react-native' 在渲染方法中添加以下代码。呈现(){ 返回<TextInput onSubmitEditing={键盘。驳回}/ >; ｝

你可以使用-

Keyboard.dismiss()

解散活动键盘，并根据react本机文档删除焦点。

2019-04-11 17:08:50

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

Use

Keyboard.dismiss(0);

隐藏键盘。

2017-05-23 09:45:25

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

这是我的解决方案键盘解散和滚动到点击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>
   );
}

2019-08-07 17:02:56

在react-native中隐藏键盘

推荐文章

最新文章

标签