当文本在 TextInput 中时，如何禁用 react-native AutoCorrect？

Posted 2023-04-18

【中文标题】当文本在 TextInput 中时，如何禁用 react-native AutoCorrect？

【英文标题】：How to disable react-native AutoCorrect while text is inside TextInput?

【发布时间】：2019-09-23 00:34:28

【问题描述】：

我想要自动更正。但是，当用户键入“@”时，我希望 autoCorrect 关闭 直到其他情况。

我尝试将 prop 设置为 false/true。但是，组件不会更改设置（当 TextInput 中有文本时）。

我该如何解决这个问题？

（仅限 ios）

【问题讨论】：

也许这个答案可以帮助你。 ***.com/questions/23453430/…

但那是针对安卓的

你能展示一些你的代码吗？可能会帮助我们更好地了解如何解决这个问题:)

@TIMEX，你之前在this link问过这个问题，这个问题的答案和这个问题帖子一样。如何处理解决方案。你有什么方法可以禁用动画吗？为什么您不接受 that answer 的问题，因为这就是答案 this currently accepted answer

【参考方案1】：

演示

代码

checkTest函数

有关最重要的注释，请参见代码 cmets。

checkText(text)
      //create a new regular expression 
      const regex = new RegExp("@");
      //check if the string contains an @ 
      const res = text.match(regex);

      // if res is not null, we have a match! 
      if (res != null)
        if (this.state.autoCorrect)
          // disable auto correction if it's still enabled
          this.input.blur(); 
          // hacky part, we need to dismiss the keyboard first, then we can show it again. 
          this.setState(autoCorrect: false, () => 
            setTimeout(() => this.input.focus(), 60);
          );
        
      else
        if (!this.state.autoCorrect)
          this.input.blur(); 
          // enable auto correction if no @ is detected anymore
          this.setState(autoCorrect: true, () => 
            setTimeout(() => this.input.focus(), 60);
          );
        
      
      //update text in state 
      this.setState( username: text);
    

渲染功能

 <View style=styles.container>
     <TextInput 
      value=this.state.username
      onChangeText=text => this.checkText(text)
      autoCorrect=this.state.autoCorrect
      />
 </View>

完整的工作示例

https://snack.expo.io/Skta6BJ34

讨论

看来，您需要“重新加载”键盘以影响自动更正属性的重新加载。我认为这仍然是一个错误，希望在未来的版本中得到解决。 （见github issue）。

与此同时，您可以使用这个小变通方法，也许可以对时间/正则表达式等进行一些微调。

编辑：

我找到了一个广泛的答案here，这个答案类似地解决了这个问题。

【讨论】：

发生这种情况时如何禁用键盘动画？在 Swift 中，有办法做到这一点（setAnimationsEnabled）……在 RN 中有没有办法？

@TIMEX 很遗憾，React Native 目前不支持设置setAnimationsEnabled。

顺便说一句，我认为动画并不那么烦人，它实际上向用户展示了现在某些东西（自动更正）有所不同。但这只是我的看法。