1.4.6 • Published 6 months ago
react-native-supervons-custom-keyboard v1.4.6
react-native-supervons-custom-keyboard
English 简体中文
github(welcome star━(`∀´)ノ亻!)
https://github.com/supervons/react-native-supervons-custom-keyboard
Summary
Developed based on react-native-security-keyboard,add:
1. Uppercase and lowercase letters
2. Character
3. Key response
4. Switch keyboard type
5. Randomly arrange the keyboard
Thanks yanzhandong source sharing
Preview gif
Preview
DEMO
https://github.com/supervons/ExploreRN/blob/master/src/screens/login/index.js
Getting started
$ npm install react-native-supervons-custom-keyboard --save
Usage
import React, { Component } from 'react';
import { View, Button } from 'react-native';
import { SecurityKeyboardInput } from 'react-native-supervons-custom-keyboard';
export default class MainPage extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: ''
};
}
render() {
return (
<View style={{ flex: 1, backgroundColor: '#ffffff' }}>
<View style={{ height: 150 }}>
<SecurityKeyboardInput
keyName={'password'}
style={{ width: width * 0.96, borderBottomColor: '#939DA6', borderBottomWidth: 1 }}
secureTextEntry={true}
random={true}
valueStyle={{ fontSize: 18, left: 1 }}
secureTextStyle={{ fontSize: 10 }}
keyboardType={'string'}
placeholder={'密码'}
placeholderTextColor={'#CACACB'}
onChangeText={text => this.setState({ inputValue: text })}
/>
<Button title={'outPut'} onPress={() => alert(this.state.inputValue)} />
</View>
</View>
);
}
}
Multiple password Input
Please add property: keyName, it's unique .
<SecurityKeyboardInput
keyName={'password'}/>
<SecurityKeyboardInput
keyName={'confirmPassword'}/>
Props
Prop | Type | Description |
---|---|---|
keyName | String | Keep the keyboard unique, required. |
disabled | Boolean | prohibit input, The default is false. |
random | Boolean | random keyboard layout, The default is false. |
caretHidden | Boolean | hide cursor, The default is false. |
secureTextEntry | String | password modal, The default is false.. |
placeholderTextColor | String | The color of the text displayed by the placeholder string. |
style | Object | custom TextInput external style Style, does not support font Style. |
valueStyle | Object | Text content style. |
keyboardHeader | element | Customizing the top of the keyboard. |
regs | Func(value) | value check, need to return the check after the value out. |
onChangeText | Func(value) | Value modified callback. |
onFocus | Func | The callback function of the focus. |
onBlur | Func | A callback function that loses focus |
Methods
Method | Parameter | Description |
---|---|---|
clear | none | Clear all the content |
isFocused | none | The return value indicates whether the current input box has got the focus. |
blur | none | Lose focus. |
focus | none | Get the focus. |
TODO-LIST
- Support typescript
1.4.6
6 months ago
1.4.5
3 years ago
1.4.4
3 years ago
1.4.3
3 years ago
1.4.2
3 years ago
1.4.1
3 years ago
1.4.0
3 years ago
1.3.14
3 years ago
1.3.13
3 years ago
1.3.11
3 years ago
1.3.12
3 years ago
1.3.10
4 years ago
1.3.9
4 years ago
1.3.7
4 years ago
1.3.6
4 years ago
1.3.5
4 years ago
1.3.4
4 years ago
1.3.3
4 years ago
1.3.2
4 years ago
1.3.1
4 years ago
1.3.0
4 years ago
1.2.0
4 years ago
1.1.0
4 years ago
1.0.0
4 years ago