React Native 中的键盘关闭

当用户输入表单数据时，键盘通常会自动弹出。但有时候，我们希望在某些情况下关闭键盘，例如用户提交了表单或者点击了屏幕其他区域。在 React Native 中，我们可以使用一些方法来实现键盘的关闭。

关闭键盘的方法

1. 使用 Keyboard 组件

React Native 提供了一个 Keyboard 组件，可以在需要的时候关闭键盘。该组件需要导入 import { Keyboard } from 'react-native';。

import React from 'react';
import { Keyboard } from 'react-native';

export default function App() {
  return (
    <View>
      <TextInput
        onSubmitEditing={() => Keyboard.dismiss()}
        placeholder="Type here..."
      />
    </View>
  );
}

以上代码中，为 TextInput 组件添加了 onSubmitEditing 属性，当用户提交表单时，键盘将被关闭。

2. 使用 TouchableWithoutFeedback 组件

除了 Keyboard 组件，我们还可以使用 TouchableWithoutFeedback 组件来关闭键盘。该组件需要导入 import { TouchableWithoutFeedback, Keyboard } from 'react-native';。

import React from 'react';
import {
  View,
  TouchableWithoutFeedback,
  Keyboard,
} from 'react-native';

export default function App() {
  const dismissKeyboard = () => {
    Keyboard.dismiss();
  };

  return (
    <TouchableWithoutFeedback onPress={dismissKeyboard}>
      <View>
        <TextInput placeholder="Type here..." />
      </View>
    </TouchableWithoutFeedback>
  );
}

以上代码中，为根 View 组件添加了 TouchableWithoutFeedback 组件的 onPress 属性，当用户点击屏幕其他区域时，键盘将被关闭。

注意事项

• 在 iOS 模拟器上测试时，使用 Keyboard.dismiss() 时需要关闭硬件键盘，否则键盘可能无法正常关闭。

• 在 Android 上使用 Keyboard.dismiss() 时，需要在 AndroidManifest.xml 文件中将 android:windowSoftInputMode="adjustResize" 改成 android:windowSoftInputMode="adjustPan"。

结语

关于 React Native 中的键盘关闭，以上就是两种常见的方法。根据场景选择不同的方法实现即可。