最近有个需要，在密码输入的时候，使用安全键盘；
一开始想直接找三方组件，但是没有合适的，唯一一个是 react-native-security-keyboard ，但还只有数字，所以就基于这
个组件开撸！在这里感谢原作者 yanzhandong 的分享。
先上效果：
Demo 地址：
https://github.com/supervons/ExploreRN
功能：
- 字母大小写键盘输入
- 数字输入
- 符号输入
- 乱序
- 键盘类型切换
安装 ：
npm install react-native-supervons-custom-keyboard --save
使用：
import React, { Component } from 'react';
import { View, Button } from 'react-native';
import RNSVCustomKeyboard 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 }}>
<RNSVCustomKeyboard
random={true}
keyboardType={'string'}
placeholder={'请输入'}
placeholderTextColor={'#E0E0E0'}
onChangeText={text => this.setState({ inputValue: text })}
/>
<Button title={'outPut'} onPress={() => alert(this.state.inputValue)} />
</View>
</View>
);
}
更多的属性说明，可以去我的github：https://github.com/supervons/react-native-supervons-custom-keyboard
为了使用的小伙伴，就到这里就可以了；
想继续听听的，下面就讲讲，改的思路。
总体思路：
- 增加字母和字符入口按钮；
- 编写字母和字符键盘布局；
- 流畅切换并修改Modal弹出效果；
- 大小写切换；
好，接下来就让我们一步步来。
一、增加字母和字符入口按钮
一开始，只有数字键盘，是宽=3，高=4 的布局。
那么，我就把宽改成4，再增加两个按钮（【ABC按钮】和【!?#按钮】），切换到字母和字符，于是有了如下界面：
入口就搞定了。
二、编写字母和字符键盘布局
由于之前的布局是动态化的，所以这一步没有太费劲，增加了字母和字符的数组，然后根据当前的类型来进行不同的展示，如下图：
三、流畅切换、随机渲染并修改modal弹出效果
在流畅切换这里，卡了下壳，原因是因为一开始想错了，想的是在切换的时候，才去随机渲染键盘的数据；
后面在 componentDidMount() 生命周期里面渲染完毕，后面直接切换就行。
这样也导致了，每一次启动键盘随机后，关闭键盘再次启动键盘不会随机，需要重启或者重新触发生命周期才会重新随机；其实想想，业务场景也是合理的，毕竟只有密码输入需要安全键盘。
如下所示，在键盘输入内容随机后，再去追加切换键盘类型和删除，因为底部的切换不应该随机。
随机渲染就没有什么好说的，也就是把数组的顺序打乱：
// 数组乱序
shuffle(arr) {
let len = arr.length;
for (let i = 0; i < len - 1; i++) {
let index = parseInt(Math.random() * (len - i));
let temp = arr[index];
arr[index] = arr[len - i - 1];
arr[len - i - 1] = temp;
}
return arr;
}
Modal 自带的从下弹出效果，完美契合键盘展示：
只需要将 animationType 属性改为 slide即可：
<Modal
animationType={'slide'}
presentationStyle={'overFullScreen'}
transparent={true}
visible={this.modalVisible}
/>
四、大小写切换
首先，去阿里云图标库，找了两个图标（太机智了）
然后，在键盘渲染的时候，指定一个特殊的图片按钮，点击的时候将键盘类型切换为大写：
至此，就结束了。
不足之处：
- 由于是基于 Modal 写的，所以多个 input 输入切换时，不连贯；因为点击键盘之外区域 Modal 就会消失。
- input 框的样式需要自己修改才能完美契合现有 input 框。
总而言之，作为单密码框来说，完全可以使用！
关注我，更多内容，即使掌握！
