推荐：React Native OTP Input - 简洁高效的验证码输入组件

import React from 'react';
import { View, TextInput, StyleSheet } from 'react-native';
 
const OTPInput = ({ numberOfCharacters }) => {
  const [otp, setOTP] = React.useState('');
 
  const handleTextChange = (index, value) => {
    // 创建一个新的字符串，用于更新OTP状态
    const newOTP = otp.split('').map((char, i) => {
      if (i === index) {
        return value;
      }
      return char;
    }).join('');
 
    // 限制OTP长度
    setOTP(newOTP.slice(0, numberOfCharacters));
  };
 
  const renderSingleInput = (index) => {
    return (
      <TextInput
        key={index}
        maxLength={1}
        onChangeText={(value) => handleTextChange(index, value)}
        style={styles.input}
      />
    );
  };
 
  const renderOTPInput = () => {
    const inputs = [];
    for (let i = 0; i < numberOfCharacters; i++) {
      inputs.push(renderSingleInput(i));
    }
    return inputs;
  };
 
  return (
    <View style={styles.container}>
      {renderOTPInput()}
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  input: {
    width: 40,
    height: 40,
    margin: 8,
    textAlign: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
});
 
export default OTPInput;

这个简化版的OTP输入组件使用React Hooks重写了状态管理，并且使用函数组件来代替类组件，使得代码更加简洁和现代。它提供了一个可复用的OTP输入框，用户可以输入验证码，同时代码中也包含了输入格式的校验，确保OTP值不会超过预设的长度。