在 TextInput 中覆盖/禁用 iOS 智能标点符号

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} 和/或autoCompleteType='off' 对输入的文本没有影响。

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

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

Answer 1

这并不总是一种选择，但是，添加：

keyboardType={'ascii-capable'}

TextInput 为我修复了它

Answer 2

确实，这是 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