如何在不单击返回按钮的情况下关闭 React Native 中的键盘？

在本文中，我们将看到如何在 React Native 中关闭键盘而不单击返回按钮。要关闭键盘，我们将讨论两种方法。第一种方法使用TouchableWithoutFeedback组件调用一个函数，该函数在点击屏幕时关闭键盘。第二种方法将使用ScrollView和keyboardShouldPersistTaps='handled'属性，这也将为我们提供相同的功能。

方法一：使用 TouchableWithoutFeedback 组件：我们简单地将我们 App 最外层的View组件封装在TouchableWithoutFeedback组件中，并将该组件的onPress值设置为Keyboard.dismiss 。

句法：

     
         ...Rest of the Application Code...
     

示例：在App.js文件中写下以下代码。

App.js

import React from 'react';
import { View, 
         StyleSheet, 
         StatusBar, 
         TouchableWithoutFeedback, 
         TextInput,
         Keyboard } from 'react-native';
  
export default class App extends React.Component {
  render(){
    return (
      
          
              
          
      
    );
  }
}
  
const styles = StyleSheet.create({
  container:{
    flex: 1,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor: '#ccd2db'
  },
  
  input:{
    width:200,
    height:50, 
    borderWidth:1,
    marginTop: 200,
    marginLeft: 100
  }
});

输出：

方法2：使用ScrollView：我们将使用ScrollView组件和keyboardShouldPersistTaps='handled'属性作为我们应用程序的最外层视图。除了按钮和文本输入区域之外，这将使我们能够在我们点击屏幕时关闭键盘。如果我们要使用没有keyboardShouldPersistTaps='handled'属性的ScrollView组件，那么在多个输入区域或点击这些按钮的情况下也会关闭键盘。

句法：

     ... Rest of the Application Code ...

示例：在App.js文件中写下以下代码。

应用程序.js

import React from 'react';
import { View, 
         StyleSheet, 
         StatusBar, 
         TouchableWithoutFeedback,
         TextInput,
         Keyboard, 
         ScrollView } from 'react-native';
  
export default class App extends React.Component {
  render(){
    return (
        
      
          
      
    
    );
  }
}
  
const styles = StyleSheet.create({
  container:{
    flex: 1,
    backgroundColor: '#ccd2db'
  },
  
  input:{
    width:200,
    height:50, 
    borderWidth:1,
    marginTop: 200,
    marginLeft: 100
  }
});

输出：