【React-native】自己动手撸一个安全键盘！

​

最近有个需要，在密码输入的时候，使用安全键盘；

一开始想直接找三方组件，但是没有合适的，唯一一个是 react-native-security-keyboard ，但还只有数字，所以就基于这

个组件开撸！在这里感谢原作者 yanzhandong 的分享。

---

先上效果：

​

Demo 地址：

github.com/supervons/E…

---

功能：

• 字母大小写键盘输入
• 数字输入
• 符号输入
• 乱序
• 键盘类型切换

---

安装 ：

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：github.com/supervons/r…

为了使用的小伙伴，就到这里就可以了；

想继续听听的，下面就讲讲，改的思路。

---

总体思路：

1. 增加字母和字符入口按钮；
2. 编写字母和字符键盘布局；
3. 流畅切换并修改Modal弹出效果；
4. 大小写切换；

好，接下来就让我们一步步来。 

---

一、增加字母和字符入口按钮

一开始，只有数字键盘，是宽=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}
/>
复制代码

---

四、大小写切换 

​

首先，去阿里云图标库，找了两个图标（太机智了） 

然后，在键盘渲染的时候，指定一个特殊的图片按钮，点击的时候将键盘类型切换为大写：

​

至此，就结束了。

---

不足之处：

1. 由于是基于 Modal 写的，所以多个 input 输入切换时，不连贯；因为点击键盘之外区域 Modal 就会消失。
2.  input 框的样式需要自己修改才能完美契合现有 input 框。

总而言之，作为单密码框来说，完全可以使用！

---