@uiw/react-native/lib/VerificationCode/index.js

UIW for React Native

import React, { useState, useEffect } from 'react';
import Input from '../Input';
import Button from '../Button';
import Text from '../Typography/Text';
import { useTheme } from '@shopify/restyle';
const VerificationCode = ({
  bordered = false,
  label = '获取验证码',
  resendLabel = '重新发送',
  count = 60,
  value = '',
  onChange = () => {},
  onBefore = async () => true,
  onSend = async () => true,
  onEnd = () => {},
  outerStyle = {},
  buttonStyle = {},
  placeholder = '请输入验证码',
  inputBorder = true
}) => {
  const [timer, setTimer] = useState(count);
  const [disabled, setDisabled] = useState(false);
  const theme = useTheme();
  useEffect(() => {
    let interval;
    if (timer > 0 && disabled) {
      interval = setInterval(() => {
        setTimer(t => t - 1);
      }, 1000);
    } else if (timer === 0 && disabled) {
      setDisabled(false);
      onEnd();
    }
    return () => clearInterval(interval);
  }, [timer, disabled, onEnd]);
  const handleClick = async () => {
    const canSend = await onBefore();
    if (canSend) {
      setTimer(count);
      setDisabled(true);
      await onSend();
    }
  };
  return <Input border={inputBorder ? 'always' : null} containerStyle={[{
    height: 40
  }, outerStyle]} placeholder={placeholder} placeholderTextColor={theme.colors.border} value={value} onChangeText={text => onChange(text)} extraEnd={<Button bordered={bordered} disabled={disabled} onPress={handleClick} color={theme.colors.background || 'transparent'} style={[buttonStyle]} size="small">
          <Text color={disabled ? 'disabled' : 'text'}>{disabled ? `${resendLabel}(${timer}s)` : label}</Text>
        </Button>} />;
};
export default VerificationCode;