supervons/react-native-supervons-custom-keyboard

An RN keyboard written in JS, including uppercase and lowercase letters, numbers, and some symbols. Standing on the shoulders of giants.一个用JS写的RN键盘，包含大小写字母，数字以及部分符号。站在巨人的肩膀上。

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
• Change to hooks

react-native-supervons-custom-keyboard's Issues

同一个页面引入多个，会高频复现报错。

在同一个页面引入多个此标签。我有多种登陆方式（代码在一个页面上），A和B。A和B都有登陆密码。在A页面和B页面都输入了密码。然后A和B来回切换，再输入密码的时候就会报错。

没有@符号

没看到@符号，版本1.4.5

全键盘第三排中间的 三个字母点不中

如题

UIManager.measure(this.refs.keyboardWrap

点的快一点的时候整个地方会报错。
我暂时加了点保护

 ```

let nodeHandle = findNodeHandle(this.refs.keyboardWrap);
nodeHandle && UIManager.measure(nodeHandle,(x, y, widths, heights)=>{
DeviceEventEmitter.emit('_keyboardDidShow',{"endCoordinates":{"screenX":0,"height":285,"width":widths,"screenY":height-heights},'isLoadKeyBoard':true});
});

不能再一个页面多次引入

在同一个页面引入多个此标签，如新密码，确认密码。在输入新密码的时候，确认密码也会同步输入值。

安卓输入时没有光标？

IOS系统在输入的时候末尾有光标，安卓在输入的时候，末尾时有时没有（光标）？