Override/Disable iOS TextInput 中的智能标点符号

Question

React Native 0.59.9 设备运行 iOS 11，并启用了智能标点符号。此 iOS 功能会自动将输入的文本转换为更美观的符号。

示例：

双连字符 -- 自动转换为破折号 — (unicode 8212)
引号 " 自动转换为弯引号 “(unicode 8220)

等等

不幸的是，禁用智能标点符号（通过“设置”>“通用”>“键盘”）不是一个选项。

我几乎完全按照 RN docs 渲染基本 TextInput 组件，唯一的例外是我使用自己的 onChangeText 处理函数来查看对输入的文字：

import React, { Component } from 'react';
import { TextInput } from 'react-native';


function handleTextChange(value) {
  // check value here after entering a '-' in the rendered TextInput.
  // when initial value is set to '', received value is ascii 45
  // when initial value is set to '-', received value is unicode 8212
}

export default function UselessTextInput() {
  const [value, onChangeText] = React.useState('-'); // change this to '' to see the difference

  return (
    <TextInput
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      onChangeText={(text) => handleTextChange(text)}
      value={value}
    />
  );
}

在 <TextInput> 上设置 autoCorrect={false} and/or autoCompleteType='off' 对输入的文本没有影响。

问题
有没有办法覆盖此自动更正行为，从而不更改用户输入的数据？

我看到有人通过 Github issue 向 Facebook RN 提出这个问题，但没有得到回应。

Answer 1

确实，这是 TextInput 的 iOS 实现的问题，但我可以为您提供解决方法。诀窍是检查 TextInput 的特殊字符值，然后适当地替换这些字符。请参见下面的示例，其中我将每个“—”替换为“--”。

代码

const UselessTextInput = () => {
  const [value, setText] = React.useState('-'); // change this to '' to see the difference

  function handleTextChange (value) {
    var val = value;
    // check if value contains special characters 
    if (value.includes("—")){
      //replace values appropriately
      val = value.replace("—", "--");
    }
    //set new text 
    setText(val);
  }
  return (
    <TextInput
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      onChangeText={(text) => handleTextChange(text)}
      value={value}
    />
  );
}

工作示例：

https://snack.expo.io/rJkj95ePB

Answer 2

它并不总是一个选项，但添加：

keyboardType={'ascii-capable'}

TextInput 帮我修复了它

Override/Disable iOS TextInput 中的智能标点符号

Override/Disable iOS Smart Punctuation in TextInput

ios

react-native

react-native-textinput