English 简体中文
https://github.com/supervons/react-native-supervons-custom-keyboard
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
https://github.com/supervons/ExploreRN/blob/master/src/screens/login/index.js
$ npm install react-native-supervons-custom-keyboard --save
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>
);
}
}Please add property： keyName, it's unique .
<SecurityKeyboardInput
keyName={'password'}/>
<SecurityKeyboardInput
keyName={'confirmPassword'}/>| 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 |
| 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. |
- Support typescript
- Change to hooks