本示例介绍如何使用TextInput组件实现自定义车牌号输入键盘场景,主要包括TextInput.customKeyboard绑定自定义键盘、自定义键盘布局和状态更新等知识点。
实现思路
1. 使用TextInput的customKeyboard的属性方法来设置自定义键盘
当设置自定义键盘时,输入框激活后不会打开系统输入法,而是加载应用指定的自定义组件,针对系统键盘的enterKeyType属性设置将无效。自定义键盘采用覆盖原始界面的方式呈现,不会对应用原始界面产生压缩或者上提。默认在输入控件失去焦点时,关闭自定义键盘,开发者也可以通过TextInputController.stopEditing方法控制键盘关闭。
2. 自定义键盘布局
本文主要介绍车牌号输入键盘的布局,还包含其他的如数字键盘、大小写键盘等
键盘枚举类型:
- 键盘类型分为省份键盘、数字+大写字母键盘、数字键盘,大写、小写键盘,特殊字符键盘
- 键盘按键类型分为输入操作INPUT、删除操作DELETE、切换数字键盘操作NUMERIC、切换大小写键盘CAPSLOCK、切换数字键盘SPECIAL、切换省份键盘、切换数字+大写字母键盘共七种类型
/**
* 键盘类型枚举
*/
export enum EKeyboardType {
PROVINCE, // 省份键盘
NUMERIC, // 数字键盘
NUMERIC_UPPERCASE, // 数字大写字母键盘
UPPERCASE, // 大写字母键盘
LOWERCASE, // 小写字母键盘
SPECIAL, // 特殊字符键盘
}
/**
* 键盘按键类型枚举
*/
export enum EKeyType {
INPUT, // 输入类型,输入具体的值
DELETE, // 删除一个输入字符
NUMERIC, // 切换数字键盘
CAPSLOCK, // 切换大小写键盘
SPECIAL, // 切换特殊字符键盘
PROVINCE, // 切换省份键盘
NUMERIC_CAPSLOCK // 切换数字大写字母键盘
}
在真实业务场景下,自定义键盘数据包括值、UI属性、位置等都通过数据请求来下发,键盘按键数据接口定义如下:
/**
* 键盘按键数据接口
*/
export interface IKeyAttribute {
label: string | Resource;
value?: string;
type?: EKeyType;
fontSize?: number;
fontColor?: string | Color;
backgr