在 React Native 开发中，有时我们需要限制用户输入的格式，比如在手机号码输入框中自动添加分隔符（如：+86 123-4567-8901），这时候就需要用到 @mypharma/react-native-text-input-mask 这个 npm 包了。
简介
@mypharma/react-native-text-input-mask 是基于 react-native 的一个文本输入框组件，它支持用户输入时根据指定的模板自动添加分隔符等格式，比如将用户输入的 1234567890 转换为 123-4567-8901。
安装
你可以使用 npm 或者 yarn 安装 @mypharma/react-native-text-input-mask，比如：
--- ------- -------------------------------------- - -- ---- --- --------------------------------------
安装完毕之后，你需要在项目中导入它并引用，比如：
------ ------------- ---- -----------------------------------------
使用
@mypharma/react-native-text-input-mask 提供了两种使用方式：
- 在 TextInput 中直接使用
-------------- ----------- ------------- --------------------------- ----------------- ------------------------- --------------------------- --
其中，type 表示输入框的限制类型，value 表示输入框的值，onChangeText 表示输入框值的改变事件，options 表示时间格式化的选项，autoCorrect 表示自动进行文本修正，keyboardType 表示键盘类型。
示例代码：
--------------
---------------
----------
----- ---- -----------
--
-------------------
-----------------------------
-------------------
--------------------------
--- 和 react-hook-form 一起使用
如果你使用 react-hook-form 进行表单数据管理，你可以将 TextInputMask 作为 Controller 的组件来使用，比如：
------ - ---------- - ---- ------------------
-----------
-----------------
---------- ------ - --------- ------- ----- - -- -- -
--------------
-----------
-----------------
---------------------------
-------------------------
-----------------------
-------------
--
--
-----------
-------------
---------------------------
--需要注意的是，在和 react-hook-form 一起使用时，你需要将 TextInputMask 包裹在 Controller 中，并将 control、name、rules、defaultValue 等参数传递进去。
示例
我们来看一个完整的示例，这个例子演示了如何使用 @mypharma/react-native-text-input-mask 来实现一个自动添加分隔符的手机号码输入框：
------ ------ - -------- - ---- --------
------ - ---------- ----- ---------- - ---- ---------------
------ ------------- ---- -----------------------------------------
------ ------- -------- ---------------------- -
----- ------------- --------------- - -------------
----- --------------------------- - ------------------- ------- -- -
----------------------------------
--
------ -
----- -------------------------
--------------
---------------
----------
----- ---- -----------
--
-------------------
------------------------------------------
-------------------
--------------------------
--
-------
--
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
---------------- ----------
--
---以上代码实现了一个输入框，当用户输入手机号码时，会自动根据指定的模板格式添加分隔符。
总结
本文介绍了如何使用 @mypharma/react-native-text-input-mask 这个 npm 包来实现自动添加分隔符等格式的文本输入框。无论是在普通的 TextInput 中使用还是结合 react-hook-form 进行表单数据管理，都十分方便。希望本文能够帮助到大家。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066bcd967216659e244a1c