简介
Keyboard 是一个特殊的用户输入方式，一般移动设备的键盘将占据屏幕的一部分，而 React Native 为此提供了 Keyboard API，方便开发者监听键盘的显示和隐藏事件。不过，在某些情况下，可能希望自定义键盘或者为键盘增加一些特殊的功能，这时就可以使用 npm 包 @remobile/react-native-smart-keyboard。
@remobile/react-native-smart-keyboard 包含了一些常用的键盘功能组件，比如键盘带发送按钮的 TextInput，可以帮助开发者快速构建需要的键盘功能。
安装
使用 @remobile/react-native-smart-keyboard 之前需要确保已经安装了 React Native，安装 npm 包可以通过以下命令：
npm install @remobile/react-native-smart-keyboard --save
使用
@remobile/react-native-smart-keyboard 主要包含了两个组件：
- CustomKeyboard：自定义键盘的基本组件；
- CustomTextInput：使用 CustomKeyboard 的 TextInput 组件。
CustomKeyboard 主要包含了两个参数：
- renderChild：自定义键盘具体内容的渲染函数；
- onCancel：自定义键盘取消按钮的回调函数。
CustomTextInput 主要包含了三个参数：
- ref：为了在其他组件中控制 CustomTextInput，需要设置 ref；
- returnKeyType：键盘回车键类型；
- onSubmitEditing：当用户点击键盘回车键时，执行的回调函数。
下面是一个简单的例子，在 CustomKeyboard 中使用 CustomTextInput 渲染一个带有发送按钮的文字输入框：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ -------------- ---- -------------------------------------------------------
------ --------------- ---- --------------------------------------------------------
------ ------- ----- --- ------- --------- -
----- - -
----- ---
-
-------- - -- -- -
--------------------- -----------------
-
----------- - -- -- -
------ -
----- -------- ------------------- ---
----------------
-------- ----- - --
---------
---------- -- -------------- - ------
----------------------
-------------------------------
--
-----
-------- -------------------------- ------------- --------- --
----------- -- -------------------------
-
--
-------
-------
--
-
-------- -
------ -
---------------
------------------------------
--
--
-
-上面的例子中，CustomTextInput 的 ref 方便我们在发送按钮按下后清空输入框的内容，onSubmitEditing 方便我们执行提交操作。CustomKeyboard 的 renderChild 用来渲染自定义键盘的内容。
总结
@remobile/react-native-smart-keyboard 可以帮助开发者快速构建一些常见的键盘功能。通过本文的介绍，你应该可以了解到 npm 包的基本使用方法和常见的应用场景，希望对你的学习和工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbf81e8991b448e6379