React 本机创建具有预定义格式 dd/mm/yyyy 的文本字段

Question

我已经创建了我自己的 Texfield，我在我的应用程序中使用它。我现在想创建一个具有预定义输入格式的文本字段。因此，例如，如下图所示，我希望文本始终具有 dd/mm/yyyy 格式，并且输入跳转到填写日期时的月份。

这张图片是我尝试完成的示例：

这是我的自定义文本字段，它基本上是带有一些样式的原生 TextInput。

//Input.tsx
interface Props {
  errorMessage?: string
  placeholder: string
  value: string
  onChange: (text: string) => void
}

const Input: React.FC<Props> = ({
  errorMessage,
  placeholder,
  onChange,
  value,
}) => {
  const [focused, setFocused] = useState(false)

  return (
    <Box marginVertical="xs">
      <Box
        borderColor={errorMessage ? 'error' : focused ? 'primary' : 'inputBG'}
        paddingVertical="inputS"
        paddingHorizontal="inputM"
        borderRadius="s"
        borderWidth={2}
        backgroundColor={errorMessage ? 'inputErrorBG' : 'inputBG'}
      >
        <TextInput
          placeholder={placeholder}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
          onChangeText={onChange}
          value={value}
        />
      </Box>
      {errorMessage ? <Text color="error">{errorMessage}</Text> : null}
    </Box>
  )
}

Answer 1

我找到了这个 package，它提供了组件 MaskInput，可以定义掩码来格式化输入。

下面我使用 variant 道具扩展了我的自定义 Input 以在变体为“日期”时显示 MaskInput。

import MaskInput, { Masks } from 'react-native-mask-input'

{variant === 'date' ? (
  // @ts-ignore
  <MaskInput
    placeholder="dd/mm/yyyy"
    mask={Masks.DATE_DDMMYYYY}
    onFocus={() => setFocused(true)}
    onBlur={() => setFocused(false)}
    onChangeText={(formatted) => onChange(formatted)}
    value={value}
    keyboardType={keyboardType}
  />
) : (
  <TextInput
    placeholder={placeholder}
    onFocus={() => setFocused(true)}
    onBlur={() => setFocused(false)}
    onChangeText={onChange}
    value={value}
    keyboardType={keyboardType}
  />
)}

React 本机创建具有预定义格式 dd/mm/yyyy 的文本字段

React native create Textfield with predefined format of dd/mm/yyyy

react-native

react-native-textinput