React Native的Confirmation Code Field组件可以用来创建一个输入确认码的表单字段,通常用于输入短信发送的验证码。以下是一个简单的实现示例:
import React, { useState } from 'react';
import { View, TextInput, StyleSheet } from 'react-native';
const ConfirmationCodeField = ({ codeLength }) => {
const [confirmationCode, setConfirmationCode] = useState('');
const handleTextChange = (index, value) => {
// 更新确认码的某个位置
if (value.length === 1) {
const newCode = confirmationCode.substr(0, index) + value + confirmationCode.substr(index + 1);
setConfirmationCode(newCode);
}
};
const renderInput = () => {
const inputs = [];
for (let i = 0; i < codeLength; i++) {
inputs.push(
<TextInput
key={i}
maxLength={1}
onChangeText={value => handleTextChange(i, value)}
style={styles.input}
/>
);
}
return inputs;
};
return (
<View style={styles.container}>
{renderInput()}
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
},
input: {
width: 40,
height: 40,
margin: 8,
borderWidth: 1,
borderColor: '#000',
textAlign: 'center',
},
});
export default ConfirmationCodeField;
使用该组件时,你可以通过codeLength
属性来指定确认码的长度。用户输入时,组件会自动更新确认码。这个简单的实现没有提供错误处理或者自动聚焦的功能,但可以作为一个起点来添加这些功能。