探索React Native新星：OTP短信验证码输入组件

import React, { useState } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
 
const OTPInput = ({ numberOfOTPs = 6 }) => {
  const [otp, setOTP] = useState('');
 
  const handleOTPChange = (index, value) => {
    // 创建一个新的字符串用于更新
    const newOTP = otp.split('').map((char, i) => {
      if (i === index) {
        return value;
      }
      return char;
    }).join('');
 
    // 如果新的OTP长度达到了设定的长度，则输入框不再可编辑
    const isOTPComplete = newOTP.length === numberOfOTPs;
 
    setOTP(newOTP);
    // 将完整的OTP传递给父组件
    props.onChange(newOTP, isOTPComplete);
  };
 
  const renderSingleInput = (index) => {
    return (
      <TextInput
        key={index}
        secureTextEntry
        maxLength={1}
        onChangeText={(value) => handleOTPChange(index, value)}
        style={styles.input}
      />
    );
  };
 
  const inputs = [];
  for (let i = 0; i < numberOfOTPs; i++) {
    inputs.push(renderSingleInput(i));
  }
 
  return (
    <View style={styles.container}>
      {inputs}
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  input: {
    width: 40,
    height: 40,
    margin: 8,
    textAlign: 'center',
    fontSize: 16,
  },
});
 
export default OTPInput;

这个简化版的OTP输入组件使用React Hooks和函数组件来替代类组件，使得代码更加简洁和现代。它提供了一个简单的自定义输入框用于接收一个六位数的OTP，并在输入完成时通知父组件。这个例子展示了如何使用React Native创建一个可重用的UI组件，并且如何通过props传递数据和事件处理函数。