如何在ReactNative中使用计数器计时器构建OTP组件并使用功能组件重新发送otp功能

我已经尝试了几篇文章来构建可定制但很难得到的OTP组件

其中一些正在IOS平台上运行，但不能在android上运行

最后，作为新手，我在做出本机反应之后经历了很多努力

这是使用React功能组件和React钩子完成的

yarn add react-native-confirmation-code-input
yarn add react-native-countdown-component
yarn add react-redux


import React,{ useState,useRef } from "react";
import {
View,StyleSheet,Text,TextInput,TouchableOpacity,Alert
} from "react-native";
import CountDown from 'react-native-countdown-component';
import CodeInput from 'react-native-confirmation-code-input';
import Icon from "react-native-vector-icons/FontAwesome5";
import { Input,Button } from "react-native-elements";
import { useSelector,useDispatch } from "react-redux";
import * as AuthActions from "../store/actions/auth";
export const OtpVerifyScreen = props => {
const auth = useSelector(state => state.auth);
const dispatch = useDispatch();
const inputRef = useRef('codeInputRef2');
const [counter,SetCounter] = useState(150); // Set here your own timer configurable
const [random,SetRandom] = useState(Math.random());
const [disabled,setDisabled] = useState(true)
const handleResend = () => {
SetRandom(Math.random())
// Handle Resend otp action here
}
const handleVerify = (otp) => {
// Handle the verification logic here
// dispatch verify action
};
return (
activeColor='rgba(0,1)'
inactiveColor='rgba(0,1)'
space={10}
keyboardType="numeric"
autoFocus={true}
codeLength={6}
size={20}
inputPosition='left'
OnFulfill={(code) => handleVerify(code)}
/>


key={random}
until={counter}
size={15}
OnFinish={() => setDisabled(() => false)}
separatorblack' }}
digit#FFF' }}
digitTxtblack' }}
timeToShow={['M','S']}
showSeparator
timeLabels={{ m: '',s: '' }}
/>




);
};
const styles = StyleSheet.create({
container: {
flex: 1,justifyContent: "center",alignItems: "flex-start",marginTop: 20,},otp: {
flex: 1,justifyContent: "flex-start",alignItems: "flex-start"
}
});
export default OtpVerifyScreen;


希望这会有所帮助
祝您编码愉快！