【免费下载链接】react-native-masked-textA pure javascript masked text and input text component for React-Native.项目地址https://gitcode.com/gh_mirrors/re/react-native-masked-text点击查看免费下载react-native-masked-text 是一个专为 React Native 打造的纯 JavaScript 掩码文本组件库它为 TextInputMask 输入框提供金额、手机号、信用卡、CPF 等开箱即用的格式化掩码。本文将从新手视角完整盘点三大高级特性checkText 拦截非法输入、rawText 原始值回调、自定义输入框组件并附上源码定位与常见坑点帮助你把输入控制做到生产级。一、快速上手30秒看懂组件全貌先执行安装命令npm install react-native-masked-text --save库在入口 rnmt.js 中只导出了 3 个核心 API分工非常清晰导出名作用源码位置TextInputMask带掩码的可输入文本框支持全部高级特性lib/text-input-mask.jsTextMask带掩码的只读文本展示lib/text-mask.jsMaskService无组件场景下的静态工具toMask/toRawValue/isValidlib/mask-service.js两者共用同一个基类 lib/base-text-component.js因此掩码计算、原始值提取逻辑完全一致。组件类型type支持 9 种内置掩码包括money、cel-phone、credit-card、datetime、custom等具体实现在 lib/masks/ 目录下类型定义可参考 index.d.ts。 本文的三大高级特性都挂在TextInputMask上建议先保证value与onChangeText受控写法正确再看下文。二、checkText一个布尔函数拦截一切非法输入checkText是组件提供的输入拦截钩子签名如下见 index.d.ts 第 57 行checkText?: (previous: string, next: string) booleanprevious输入框当前的文本next本次操作后即将写入的文本返回false时本次输入被直接丢弃输入框保持原样执行链路可以查 lib/text-input-mask.js每次键盘变化先触发_checkText只有校验通过才会走掩码更新。典型用途限制最大长度return next.length 11白名单拦截只允许输入数字和-防粘贴攻击一次性粘贴超长内容时直接拒绝TextInputMask type{only-numbers} value{text} onChangeText{t this.setState({ text: t })} checkText{(previous, next) next.length 11} /⚠️ 两个易错点checkText只作用于TextInputMask输入场景TextMask是只读组件没有该回调。拦截判断的是掩码后的完整文本而不是单个新按键写条件时别按单字符思维去处理。三、rawText 回调onChangeText 一次拿到显示值 原始值提交表单时后端要的往往是去掉分隔符的原始值如12345678901而不是123.456.789-01。组件提供两种方式方式一includeRawValueInChangeText推荐1.12.0开启该属性后onChangeText的第二个参数就是原始值rawTextREADME.md 有完整说明TextInputMask type{cpf} value{text} includeRawValueInChangeText{true} onChangeText{(maskedText, rawText) { // maskedText: 123.456.789-01用户看到的 // rawText: 12345678901要提交的 }} /实现见 lib/base-text-component.jsupdateValue在计算掩码文本后按需同步提取原始值一起回传无需额外 ref。方式二ref getRawValue()旧版本兼容TextInputMask type{zip-code} value{text} onChangeText{t this.setState({ text: t })} ref{ref this.zipInput ref} / // 任意时刻取原始值 const raw this.zipInput.getRawValue() // 98765321如果根本不用组件例如在接口层统一处理可以调用静态方法MaskService.toRawValue(cpf, maskedValue, settings)源码在 lib/mask-service.js。四、customTextInput把原生输入框换成你的设计系统组件当项目使用 Ant Design 等第三方 UI 库时原生TextInput的样式往往不统一。customTextInputcustomTextInputProps可以让掩码逻辑直接骑在你自己的组件上README.md。TextInputMask type{cel-phone} value{text} onChangeText{t this.setState({ text: t })} customTextInput{MyDesignTextField} // 你的自定义输入组件 customTextInputProps{{ label: 手机号 }} // 透传给该组件的 props /在 lib/text-input-mask.js 的render中可以看到当传入customTextInput时它会替换默认TextInput并透传customTextInputProps否则回退到原生组件。关键机制新手常忽略受控契约自定义组件必须支持value和onChangeText两个 props组件靠它们完成掩码回写lib/text-input-mask.js。拿到底层 ref通过refInput回调可获得真实输入框实例用于setNativeProps或聚焦控制。props 透传所有原生TextInput属性都会展开透传其中value与onChangeText被组件接管传keyboardType则会覆盖掩码自带的键盘类型lib/text-input-mask.js。五、进阶组合拳校验与原生访问能力API说明合法性校验isValid()实例方法校验当前值是否符合掩码规则适合提交前检查获取原生实例getElement()返回底层TextInput实例静态格式化MaskService.toMask(type, value, settings)不渲染组件也能格式化如MaskService.toMask(money, 123, { unit: US$ })三者组合的经典场景输入时用checkText拦非法字符 → 变更时用rawText收集原始值 → 提交前用isValid()做最终把关。六、常见坑点清单 rawText 拿不到忘记开includeRawValueInChangeText此时onChangeText第二个参数是undefined。checkText 没生效确认用的是TextInputMask且注意它判断的是整段掩码文本。自定义输入框不回显你的组件没有正确消费透传的value或自己又套了一层非受控状态。键盘类型不对手动传了keyboardType会覆盖掩码默认值如金额框的数字键盘不确定就别传。babel es2015 报错按官方排障建议执行react-native start --reset-cache。七、核心特性与源码对照表高级特性关键 props / 方法源码位置输入拦截checkTextlib/text-input-mask.js原始值回调includeRawValueInChangeTextlib/base-text-component.js自定义输入框customTextInput/customTextInputProps/refInputlib/text-input-mask.js校验与工具isValid/getRawValue/MaskServicelib/mask-service.js、lib/masks/custom.mask.js掌握以上三个高级特性react-native-masked-text就能覆盖绝大多数金额、证件、电话类输入场景展示交给掩码原始值交给rawText边界情况交给checkTextUI 风格交给customTextInput。更多用法可继续查看 README.md 的完整示例与 CHANGELOG.md 的版本说明。赞分享【免费下载链接】react-native-masked-textA pure javascript masked text and input text component for React-Native.项目地址https://gitcode.com/gh_mirrors/re/react-native-masked-text点击查看免费下载相关推荐react-datepicker自定义输入框customInput属性实现个性化表单控件react datepicker自定义输入框customInput属性实现个性化表单控件 你还在为React项目中的日期选择器输入框样式千篇一律而烦恼吗还在前端UI组件React Native 验证码输入框组件教程React Native 验证码输入框组件教程 项目介绍 react native confirmation code field 是一个用于 React Na创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考