NumberKeyboard - Numeric keypad component

Effect demonstration

1. Default numeric keyboard

<NumberKeyboard.NumberKeyboardView
  onPress={(e) => {
    Alert.alert(e);
  }}
  onDelete={() => {
    Alert.alert("delete");
  }}
  onSubmit={() => {
    Alert.alert("submit");
  }}
/>

2. ID card keyboard

<NumberKeyboard.NumberKeyboardInput label="Label" value={value} />
<NumberKeyboard.NumberKeyboardView
  type="idcard"
  onPress={(e) => {
    Alert.alert(e);
  }}
  onDelete={() => {
    Alert.alert("delete");
  }}
  onSubmit={() => {
    Alert.alert("submit");
  }}
/>

3. Integer keyboard

<NumberKeyboard.NumberKeyboardInput label="Label" value={value} />
<NumberKeyboard.NumberKeyboardView
  type="integer"
  onPress={(e) => {
    Alert.alert(e);
  }}
  onDelete={() => {
    Alert.alert("delete");
  }}
  onSubmit={() => {
    Alert.alert("submit");
  }}
/>

4. Keyboard pop-up window

<Button title="Open" onPress={() => setVisible(true)} />
<NumberKeyboard.NumberKeyboardModal
  visible={visible}
  onClose={() => setVisible(true)}
/>

5. NumberKeyboardItem

<NumberKeyboardItem type="number" digit={2} />

6. NumberKeyboardInput

<NumberKeyboardInput label="Waybill quantity" type="number" digit={2} />

API

NumberKeyboardView 组件

Properties	Required	Description	Type	Default Value
type	false	Keyboard type (number, ID card, integer)	number | IdCard | integer	number
onPress	false	Key callback event	(key: string) => void
onDelete	false	Callback event for deleting a key	() => void
onSubmit	false	Submit key press callback event	() => void
submitText	false	The text of the submit button	string	OK
activeOpacity	false	Opacity when pressed	number	0.6

NumberKeyboardModal component

Properties	Required	Description	Type	Default Value
type	false	Keyboard type (number, ID card, integer)	number | IdCard | integer	number
onPress	false	Key callback event	(key: string) => void
onDelete	false	Callback event for deleting a key	() => void
onSubmit	false	Submit key press callback event	(value: string) => void
submitText	false	The text of the submit button	string	OK
activeOpacity	false	Opacity when pressed	number	0.6
value	false	input value	string
visible	true	Whether to open the pop-up window	boolean	false
onClose	true	Callback event to close the pop-up window	() => void
prefixLabel	false	Prefix text for the entered value	string	current value

NumberKeyboardItem component

Properties	Required	Description	Type	Default Value
type	false	Keyboard type (number, ID card, integer)	number | IdCard | integer	number
value	false	input value	string
onChange	false	Callback after value modification	(value: string) => void
onCheck	false	Callback to verify the value	(value: string) => Promise<any>
placeholder	false	prompt	string	please enter
style	false	Custom style	ViewStyle
inputStyle	false	Input box custom style	TextStyle
extra	false	Right content	ReactNode
arrowClear	false	Whether to allow clearing	boolean	true
disabled	false	Whether to disable	boolean	false
digit	false	Number of decimal places to retain	number	0
minHeight	false	Minimum height	number	32
activeOpacity	false	Opacity when pressed	number	0.6

NumberKeyboardInput component

Properties	Required	Description	Type	Default Value
type	false	Keyboard type (number, ID card, integer)	number | IdCard | integer	number
value	false	input value	string
onChange	false	Callback after value modification	(value: string) => void
onCheck	false	Callback to verify the value	(value: string) => Promise<any>
placeholder	false	prompt	string	please enter
style	false	Custom style	ViewStyle
inputStyle	false	Input box custom style	TextStyle
extra	false	Right content	ReactNode
arrowClear	false	Whether to allow clearing	boolean	true
disabled	false	Whether to disable	boolean	false
digit	false	Number of decimal places to retain	number	0
minHeight	false	Minimum height	number	32
activeOpacity	false	Opacity when pressed	number	0.6
label	false	label text	ReactNode
brief	false	Other content	ReactNode