最近有個需要，在密碼輸入的時候，使用安全鍵盤；
一開始想直接找三方組件，但是沒有合適的，唯一一個是 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 框。
總而言之，作爲單密碼框來說，完全可以使用！
關注我，更多內容，即使掌握！
