@td-design/react-native
Version:
react-native UI组件库
224 lines (194 loc) • 9.15 kB
Markdown
---
title: NumberKeyboard - 数字键盘组件
nav:
title: RN组件
path: /react-native
group:
title: 表单组件
path: /form
---
# NumberKeyboard 数字键盘组件
## 效果演示
### 1. 默认的数字键盘
```tsx | pure
<NumberKeyboardInput
onPress={e => {
Alert.alert(e);
}}
onDelete={() => {
Alert.alert('delete');
}}
onSubmit={() => {
Alert.alert('submit');
}}
/>
```
<center>
<figure>
<img
alt="数字键盘 ios"
src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1609320228495622158.gif"
style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
/>
</figure>
</center>
### 2. 身份证键盘
```tsx | pure
<NumberKeyboardInput
type="IdCard"
onPress={e => {
Alert.alert(e);
}}
onDelete={() => {
Alert.alert('delete');
}}
onSubmit={() => {
Alert.alert('submit');
}}
/>
```
<center>
<figure>
<img
alt="身份证键盘 ios"
src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1609320228906238884.gif"
style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
/>
</figure>
</center>
### 3. 整数键盘
```tsx | pure
<NumberKeyboardInput
type="integer"
onPress={e => {
Alert.alert(e);
}}
onDelete={() => {
Alert.alert('delete');
}}
onSubmit={() => {
Alert.alert('submit');
}}
/>
```
<center>
<figure>
<img
alt="整数键盘 ios"
src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1609320228906451063.gif"
style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
/>
</figure>
</center>
### 4. 键盘弹窗
```tsx | pure
<Button
title="keyboard"
onPress={() =>
showNumberKeyboard({
type: 'IdCard',
onPress: e => {
Alert.alert(e);
},
onDelete: () => {
Alert.alert('delete');
},
onSubmit: () => {
Alert.alert('submit');
},
})
}
/>
```
<center>
<figure>
<img
alt="键盘弹窗 ios"
src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1609320231762702497.gif"
style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
/>
</figure>
</center>
### 5. NumberKeyboardItem
```tsx | pure
<NumberKeyboardItem type="number" digit={2} />
```
<center>
<figure>
<img
alt="键盘弹窗 ios"
src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1643186997476238471.gif"
style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
/>
</figure>
</center>
### 6. NumberKeyboardInput
```tsx | pure
<NumberKeyboardInput label="运单量" type="number" digit={2} />
```
<center>
<figure>
<img
alt="键盘弹窗 ios"
src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1643187096525786335.gif"
style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
/>
</figure>
</center>
## API
### NumberKeyboardView 组件
| 属性 | 必填 | 说明 | 类型 | 默认值 |
| ------------- | ------- | ------------------------------- | --------------------------------- | -------- |
| type | `false` | 键盘类型 （数字、身份证、整数） | `number` \| `IdCard` \| `integer` | `number` |
| onPress | `false` | 按键的回调事件 | `(key: string) => void` | |
| onDelete | `false` | 删除按键的回调事件 | `() => void` | |
| onSubmit | `false` | 提交按键的回调事件 | `() => void` | |
| submitText | `false` | 提交按键的文本 | `string` | `确定` |
| activeOpacity | `false` | 按下时的不透明度 | `number` | `0.6` |
### NumberKeyboardModal 组件
| 属性 | 必填 | 说明 | 类型 | 默认值 |
| ------------- | ------- | ------------------------------- | --------------------------------- | -------- |
| type | `false` | 键盘类型 （数字、身份证、整数） | `number` \| `IdCard` \| `integer` | `number` |
| onPress | `false` | 按键的回调事件 | `(key: string) => void` | |
| onDelete | `false` | 删除按键的回调事件 | `() => void` | |
| onSubmit | `false` | 提交按键的回调事件 | `(value: string) => void` | |
| submitText | `false` | 提交按键的文本 | `string` | `确定` |
| activeOpacity | `false` | 按下时的不透明度 | `number` | `0.6` |
| value | `false` | 输入值 | `string` | |
| prefixLabel | `false` | 输入的值的前置文本 | `string` | `当前值` |
### NumberKeyboardItem 组件
| 属性 | 必填 | 说明 | 类型 | 默认值 |
| ------------- | ------- | ------------------------------- | --------------------------------- | -------- |
| type | `false` | 键盘类型 （数字、身份证、整数） | `number` \| `IdCard` \| `integer` | `number` |
| value | `false` | 输入值 | `string` | |
| onChange | `false` | 值修改后的回调 | `(value: string) => void` | |
| onCheck | `false` | 对值进行校验的回调 | `(value: string) => Promise<any>` | |
| placeholder | `false` | 提示语 | `string` | `请输入` |
| style | `false` | 自定义样式 | `ViewStyle` | |
| inputStyle | `false` | 输入框自定义样式 | `TextStyle` | |
| extra | `false` | 右侧内容 | `ReactNode` | |
| arrowClear | `false` | 是否允许清空 | `boolean` | `true` |
| disabled | `false` | 是否禁用 | `boolean` | `false` |
| digit | `false` | 保留的小数位数 | `number` | `0` |
| activeOpacity | `false` | 按下时的不透明度 | `number` | `0.6` |
### NumberKeyboardInput 组件
| 属性 | 必填 | 说明 | 类型 | 默认值 |
| ------------- | ------- | ------------------------------- | --------------------------------- | -------- |
| type | `false` | 键盘类型 （数字、身份证、整数） | `number` \| `IdCard` \| `integer` | `number` |
| value | `false` | 输入值 | `string` | |
| onChange | `false` | 值修改后的回调 | `(value: string) => void` | |
| onCheck | `false` | 对值进行校验的回调 | `(value: string) => Promise<any>` | |
| placeholder | `false` | 提示语 | `string` | `请输入` |
| style | `false` | 自定义样式 | `ViewStyle` | |
| inputStyle | `false` | 输入框自定义样式 | `TextStyle` | |
| extra | `false` | 右侧内容 | `ReactNode` | |
| arrowClear | `false` | 是否允许清空 | `boolean` | `true` |
| disabled | `false` | 是否禁用 | `boolean` | `false` |
| digit | `false` | 保留的小数位数 | `number` | `0` |
| minHeight | `false` | 最小高度 | `number` | `32` |
| activeOpacity | `false` | 按下时的不透明度 | `number` | `0.6` |
| label | `false` | 标签文本 | `ReactNode` | |
| labelPosition | `false` | 标签位置。输入框左侧或者顶部 | `left` \| `top` | `left` |
| colon | `false` | 是否在标签后显示冒号 | `boolean` | `false` |
| required | `false` | 是否在标签前显示必填标识 | `boolean` | `false` |
| brief | `false` | 其他内容 | `ReactNode` | |