ReactNative支付密碼輸入框實現詳解

Posted on by

正文

項目中需求如果涉及錢包，支付等功能，可以大概率會用到輸入密碼組件，也算是個常見組件吧。

之前寫過一個純js的開源組件，使用的類的形式，也比較老瞭，可直接添加npm庫到項目中進行使用。

hooks版本

最近項目需要，又重新寫瞭一個hooks版本的，現在直接上源碼，對於不想添加依賴庫的夥伴，可直接復制源碼到項目中，直接使用。

'use strict';
import React, {useRef, useState} from 'react';
import {StyleSheet, View, Pressable, TextInput} from 'react-native';
// 支付密碼輸入框
const PasswordInput = ({isAutoFocus = false}) => {
    const [msg, setMsg] = useState('');
    const textInputRef = useRef();
    const onEnd = (text: string) => {
        console.log('輸入密碼：', text);
    };
    const _getInputItem = () => {
        let inputItem = [];
        for (let i = 0; i < 6; i++) {
            inputItem.push(
                <View key={i} style={i === 5 ? [styles.textInputView, {borderRightWidth: 1}] : [styles.textInputView, {borderRightWidth: 0}]}>
                    {i < msg.length ? <View style={{width: 16, height: 16, backgroundColor: '#222', borderRadius: 8}} /> : null}
                </View>,
            );
        }
        return inputItem;
    };
    const _onPress = () => {
        textInputRef?.current.focus();
    };
    return (
        <Pressable onPress={_onPress}>
            <View style={styles.container}>
                <View style={{flexDirection: 'row', marginTop: 36, justifyContent: 'center'}}>
                    <TextInput
                        style={styles.textInputMsg}
                        ref={textInputRef}
                        maxLength={6}
                        autoFocus={isAutoFocus}
                        keyboardType="number-pad"
                        defaultValue={msg}
                        onChangeText={text => {
                            setMsg(text);
                            if (text.length === 6) {
                                onEnd(text);
                            }
                        }}
                    />
                    {_getInputItem()}
                </View>
            </View>
        </Pressable>
    );
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff',
        justifyContent: 'center',
        alignItems: 'center',
    },
    textInputView: {
        height: 85 / 2,
        width: 85 / 2,
        borderWidth: 1,
        borderColor: '#c9c7c7',
        justifyContent: 'center',
        alignItems: 'center',
    },
    textInputMsg: {
        height: 45,
        zIndex: 99,
        position: 'absolute',
        width: 45 * 6,
        opacity: 0,
    },
});
export default PasswordInput;

使用方式就很簡單瞭：

<PasswordInput />

項目庫地址鏈接Github: github.com/wayne214/re…

以上就是ReactNative支付密碼輸入框實現詳解的詳細內容，更多關於ReactNative支付密碼輸入框的資料請關註WalkonNet其它相關文章！

推薦閱讀：