react-native 安全數字鍵盤

react-native,安全 純數字鍵盤組件；

所需依賴原生react-native和ant-design RN；

代碼比較簡單，有這方面需求的小夥伴能夠copy隨時使用；

能夠根據本身實際業務場景做修改

使用

<Keyboard
        type='deal'//verify,deal 
        title={'請輸入交易密碼'}
        keyboardVisible={this.state.keyboardVisible}
        toClose={this.onKeyboard}
        getPasswordstr={(str) => { console.log(str) }}
        getPasswordArr={(arr) => { console.log(arr) }}
        forgot={() => { console.log(1111) }}
    />

源碼

import React, { Component } from 'react';
    import { StyleSheet, Text, View, Modal, Dimensions } from 'react-native';
    import { Grid, Icon } from '@ant-design/react-native';
    
    
    let width = Dimensions.get('window').width;//獲取設備的寬高
    let height = Dimensions.get('window').height;
    let i = 0;
    export default class Keyboard extends Component {
        static navigationOptions = {
            header: null
        }
        constructor(props) {
            super(props);
            this.state = {
                keyData: [],
                hideBg: [],
                currentIndex: undefined
            }
        }

    componentDidMount() {
        this.defaultHideDom();
    }


    configItemEl(_el, index) {
        const { currentIndex } = this.state;
        if (index <= 8) {
            return (<Text style={currentIndex === index ? styles.active : null}>{index + 1}</Text>);
        }
        if (index === 9) {
            return (<Text style={{ width: width / 3, height: 50, backgroundColor: '#CCC' }}></Text>);
        }
        if (index === 10) {
            return (<Text style={currentIndex === index ? styles.active : null}>0</Text>);
        }
        if (index === 11) {
            return (<Text style={{ color: '#0080FF', width: width / 3, height: 50, backgroundColor: '#CCC', textAlign: 'center', lineHeight: 50 }}>DELETE</Text>);
        }
    }



    defaultHideDom() {
        this.setState({
            hideBg: Array.from(new Array(6)).map((_val, i) => ({
                text: <View style={styles.showPW} key={i}></View>,
            }))
        })
    }
onKeyClick(index, i) {
        const getPasswordstr = this.props.getPasswordstr;
        const getPasswordArr = this.props.getPasswordArr;
        if (index !== 12 && index !== 10 && this.state.keyData.length < 6) {
            this.setState({
                keyData: [...this.state.keyData, index === 11 ? 0 : index],
                hideBg: this.state.hideBg.map((item, indexKey) => {
                    if (indexKey === i - 1) {
                        item.text = (<View style={styles.showPW}>
                            <Text style={styles.passWorld}></Text>
                        </View>)
                    }
                    return item
                })
            }, () => {
                if (i === 6) {
                    getPasswordstr(this.state.keyData.join(''));
                }
                getPasswordArr(this.state.keyData);
            });
        }
        if (index === 12 && this.state.keyData.length >= 0) {
            const arr = this.state.keyData.filter((item, indexKey) => i !== indexKey)
            this.setState({
                keyData: arr,
                hideBg: this.state.hideBg.map((item, indexKey) => {
                    if (indexKey === i) {
                        item.text = (<View style={styles.showPW}></View>)
                    }
                    return item
                })
            }, () => {
                getPasswordstr(this.state.keyData.join(''));
                getPasswordArr(this.state.keyData);
            })
        }
    }
render() {
        const visible = this.props.keyboardVisible;
        const type = this.props.type;
        const title = this.props.title;
        const toClose = this.props.toClose;
        const forgot = this.props.forgot;
        const { hideBg } = this.state;
        return (
            <Modal
                visible={visible}
                animationType="slide"
                transparent={true}
                onRequestClose={() => {
                    i = 0;
                    this.defaultHideDom();
                    this.setState({ keyData: [] });
                    return toClose();
                }}
            >
                <View style={styles.container}>
                    <View style={styles.header}>
                        <Text onPress={() => {
                            i = 0;
                            this.defaultHideDom();
                            this.setState({ keyData: [] });
                            toClose()
                        }} style={styles.iconContainer}><Icon name='close' /></Text>
                        <Text>{title}</Text>
                        <Text style={styles.forgot} onPress={() => { forgot() }}>忘記密碼</Text>
                    </View>
                    {type === 'deal' && (<Grid
                        data={hideBg}
                        columnNum={6}
                        hasLine={false}
                        itemStyle={{
                            justifyContent: 'center',
                            alignItems: 'center',
                            flex: 1,
                            height: 80,
                            backgroundColor: '#FFF',
                        }}
                        renderItem={(_el, index) => _el.text}
                    />)}
<Grid
                        data={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
                        columnNum={3}
                        onPress={(_el, index) => {
                            this.setState({ currentIndex: index }, () => {
                                setTimeout(() => { this.setState({ currentIndex: undefined }) }, 10)
                            });
                            if (_el !== 12 && _el !== 10 && i < 6) {
                                i++
                            }
                            if (_el === 12 && i > 0) {
                                i--
                            }
                            this.onKeyClick(_el, i)
                        }}
                        itemStyle={{
                            justifyContent: 'center',
                            alignItems: 'center',
                            flex: 1,
                            height: 50,
                            backgroundColor: '#FFF'
                        }}
                        renderItem={(_el, index) =>
                            this.configItemEl(_el, index)
                        }
                    />
                </View>
            </Modal>
        );
    }

}
const styles = StyleSheet.create({
    active: {
        width: width / 3,
        height: 50,
        backgroundColor: '#0080FF',
        color: '#FFF',
        textAlign: 'center',
        lineHeight: 50
    },
    forgot: {
        marginRight: 10,
        color: '#0080FF',
        fontSize: 12,
        fontWeight: null
    },
    passWorld: {
        borderRadius: 10,
        width: 10,
        height: 10,
        backgroundColor: '#ccc'
    },
    showPW: {
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: '#CCC',
        borderWidth: 1,
        borderStyle: 'solid',
        width: 25,
        height: 25
    },
    iconContainer: {
        width: 25,
        height: 25,
        marginLeft: 10
    },
    header: {
        width: width,
        height: 45,
        flexWrap: 'nowrap',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#FFF',
        flexDirection: 'row',
        alignContent: 'space-around',
        borderBottomWidth: 1,
        borderStyle: 'solid',
        borderBottomColor: '#EAEAEA'
    },
    container: {
        width: width,
        height: height,
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
        backgroundColor: 'rgba(0,0,0,0.4)',
        position: 'absolute',
        top: -25
    },
});