如何在 React-Native 中实现输入文本屏蔽？

【问题标题】：How to implement input text masking in React-Native?如何在 React-Native 中实现输入文本屏蔽？
【发布时间】：2019-12-04 10:25:41
【问题描述】：

需要掩码：90.99%，其中： 9 - 可选数字 0 - 必填 %,。 - 相关字符 '%' 和 '.'

例如： 输入/结果

1 ---> 1%
12 ---> 12%
12.1 ---> 12.1%
12.12 ---> 12.12%

我正在使用redux-form

我已经尝试过react-native-text-input-mask 和react-native-masked-text，但是，这些包中没有类似的功能（在第一个包中有类似的东西，但是只有在数字，但这个字符应该在之后）

【问题讨论】：

标签： reactjs react-native input react-native-android masking

【解决方案1】：

这里最好的方法是在输入本身旁边提供掩码。这在很大程度上取决于您如何使用 Field 组件（您甚至使用它吗？）。

您可以尝试在 Field 上使用 format 属性。

或者您可以提供自己的组件来呈现字段并提供自己的格式功能：

const renderPercentagedInput = (field) => {
  function onChange(evt) {
    const value = evt.target.value;
    const numbers = value.replace(/[^0-9.,]/g, '')
    field.input.onChange(numbers + '%')
  }

  return (
    <TextInput
      {...field.input}
      onChangeText={onChange}
    />
  );
}

【讨论】：