简介
在开发 React Native 应用时，输入框是比较常见的组件之一。而在使用输入框时，如果需要完成输入之后自动隐藏软键盘，就需要使用一些第三方组件来进行支持。 react-native-keyboard-done-button 正是一个这样的第三方组件。
react-native-keyboard-done-button 可以在软键盘上方添加一个 Done 按钮，点击该按钮即可收起软键盘，用户可以轻松完成输入。
本文将介绍如何使用 react-native-keyboard-done-button，帮助开发者更快速地完成 React Native 应用的开发。
安装
使用 npm 命令可以轻松地安装 react-native-keyboard-done-button：
npm install react-native-keyboard-done-button --save
使用
在需要使用 react-native-keyboard-done-button 的文件中，引入 KeyboardDoneButton 组件：
import KeyboardDoneButton from 'react-native-keyboard-done-button';
接着，在 TextInput 的组件中添加 KeyboardDoneButton 组件即可：
<TextInput
...
returnKeyType='done'
blurOnSubmit={true}
onSubmitEditing={Keyboard.dismiss}
/>
<KeyboardDoneButton onPress={Keyboard.dismiss} />其中，KeyboardDoneButton 组件的 onPress 属性指定了点击 Done 按钮后的操作，此处为收起软键盘。
同时，还需要在 TextInput 组件中设置 returnKeyType='done'，blurOnSubmit={true}，这样在点击 Done 按钮后，软键盘就会同时收起。
示例
下面是一个使用 react-native-keyboard-done-button 的完整示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- ---------- ----- ----- -------- - ---- ---------------
------ ------------------ ---- ------------------------------------
----- --- - -- -- -
----- ------ -------- - -------------
------ -
----- -------------------------
----- ----------------------------------
----------
--------------------
------------
----------------------
-------------------
--------------------
-------------------
----------------------------------
--
------------------- -------------------------- --
-------
--
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- --------
--
------ -
--------- ---
----------- ------
--
------ -
------ ------
------- ---
-------- ---
------- ---
------------ --
------------ -------
------------- -
-
---
------ ------- ----运行示例代码后，即可看到一个具有 Done 按钮的 TextInput 输入框，输入内容并点击 Done 按钮后，软键盘自动隐藏。
总结
使用 react-native-keyboard-done-button 可以为 React Native 应用添加一个 Done 按钮，提高用户输入的体验。在使用时只需安装并在 TextInput 中添加 KeyboardDoneButton 组件，同时在 TextInput 中设置 returnKeyType='done' 和 blurOnSubmit={true} 即可实现自动隐藏软键盘。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cef81e8991b448da8c9