react-native - 当文本在TextInput内时，如何禁用 native 自动更正？

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

我尝试将 Prop 设置为false/true。但是，该组件不会更改设置(当TextInput中有文本时)。

我该如何解决？

(仅适用于iOS)

最佳答案

演示版



代码

checkTest函数

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

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

讨论

看来，您需要“重新加载”键盘以影响autoCorrect属性的重新加载。我认为这仍然是一个错误，有望在以后的版本中解决。 (请参见github issue)。

同时，您可以使用这种小解决方法，并且可以对计时/正则表达式等进行一些微调。

编辑:

我找到了一个广泛的答案here，这个问题同样解决了这个问题。