react-native - 使用 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>
  )
}

标签： react-nativereact-native-textinput

Answer 1

我发现这个包提供了MaskInput可以定义掩码来格式化输入的组件。

下面我Input使用variant道具扩展了我的自定义，以在变体为“日期”时显示 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}
  />
)}