React Native TextInput 在 setState 上闪烁

Question

我正在使用 React Native TextInput 构建货币输入组件。 当用户键入时，要求文本应始终采用以下格式：

$ + [integer-part] . [2 digits decimals]

因此，例如，如果用户输入

2

，它应该自动格式化为

$0.02

。我可以在用户键入时执行格式化，如下面的屏幕截图所示：

基本上，使用 onChangeText，我应用一些格式，然后使用格式化值调用 setState。

这里的问题是新输入的字符在被正确格式化之前会显示一秒钟。这会导致 TextInput 短暂闪烁。

我看过这个类似的问题。但不仅我无法理解接受的答案如何解决我的问题。即使我按照建议做了，它也不起作用。

我不知道如何解决这个问题：似乎 TextInput 无法完全“控制”，因为它正在显示输入字符，尽管我已经明确指出：

value={this.state.value}

来自社区的任何帮助将不胜感激

Answer 1

react-native github 中有一个未解决的问题：

格式化文本关闭时TextInput闪烁，与：

有关

无法在 Android 上修改 TextInput onChangeText 回调中的文本（自 2019 年起开放）

即使在 v0.68.1（我们今天最新的版本）中也会发生同样的问题。

我有一个特殊情况，我需要使用货币掩码，我有两个选择：

1. 接受闪烁问题并保留面罩
2. 删除掩码并让用户输入任何纯文本值。 （就我而言，强制键盘类型为“数字”就足够了。

Answer 2

就我而言，热重载是原因 尝试重新加载应用程序并照常使用 TextInput。