ios - TextInpout 自动更正在 ios 中显示相反 [react native]

Question

它只发生在 ios 中，我附上了图片，你可以看到行为(ios 的自动更正)

TextInput 样式:

textInput: {
    flex: 1,
    alignSelf: 'center',
    fontSize: 16,
    lineHeight: 24,
    writingDirection: 'rtl',
    top: 8,
    textAlign: "right",
},

• 我尝试了 rtl 和 ltr 的所有组合 - 右侧和左侧的文本样式，所以我认为这不是文本样式的问题

我在项目中附加了 package.json 文件:

"dependencies": {
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
    "@jumpn/react-native-jetifier": "^0.1.4",
    "@target-corp/react-native-svg-parser": "^1.0.6",
    "babel-preset-react-native": "^5.0.2",
    "bugsnag-react-native": "^2.21.1",
    "color": "^3.1.0",
    "faker": "^4.1.0",
    "hat": "^0.0.3",
    "lottie-ios": "2.5.3",
    "lottie-react-native": "2.6.1",
    "mobx": "3.4.0",
    "mobx-persist": "^0.4.1",
    "mobx-react": "^4.3.5",
    "moment": "^2.22.2",
    "moment-range": "^4.0.2",
    "pushwoosh-react-native-plugin": "^5.13.1",
    "react": "16.8.3",
    "react-native": "0.59.8",
    "react-native-check-box": "^2.1.7",
    "react-native-circle-checkbox": "^0.1.6",
    "react-native-collapsible": "^1.4.0",
    "react-native-config": "^0.11.7",
    "react-native-dash": "^0.0.9",
    "react-native-device-info": "^1.1.0",
    "react-native-email-link": "^1.6.2",
    "react-native-extended-stylesheet": "^0.11.2",
    "react-native-i18n": "^2.0.15",
    "react-native-keyboard-aware-scroll-view": "^0.8.0",
    "react-native-keyboard-aware-scrollview": "^2.0.0",
    "react-native-modal": "^11.3.1",
    "react-native-modal-datetime-picker": "^7.5.0",
    "react-native-modal-selector": "^1.0.3",
    "react-native-phone-call": "^1.0.9",
    "react-native-picker-select": "^6.2.0",
    "react-native-pose": "^0.9.1",
    "react-native-restart": "^0.0.10",
    "react-native-rtl-layout": "^0.0.1",
    "react-native-signalr": "^1.0.6",
    "react-native-splash-screen": "^3.2.0",
    "react-native-status-bar-height": "^2.3.1",
    "react-native-svg": "^9.4.0",
    "react-native-svg-uri": "^1.2.3",
    "react-native-unique-id": "^1.0.4",
    "react-native-vector-icons": "^6.1.0",
    "react-navigation": "^2.11.2",
    "rn-placeholder": "^2.0.0",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/runtime": "^7.4.5",
    "babel-jest": "^24.8.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.54.1",
    "react-test-renderer": "16.8.3"
  },

Answer 1

可能的问题原因

可能是您的设备正在使用 RTL 语言(阿拉伯语等)，并且您明确指定了 textAlign 和 wirtingDirection。

---

快速解决方案

您不必在 textInput 样式上指定 textAlign 和 writingDirection。

---

本地化用户体验

如果您想本地化应用程序的体验以适应 RTL 和 LTR，请遵循:

import { I18nManager } from 'react-native'   // ... import I18nManager along your other react native imports

更改您的 textInput 样式以反射(reflect)以下内容:

textInput: {
    top: 8,
    flex: 1,
    fontSize: 16,
    lineHeight: 24,
    alignSelf: 'center'
},

如果您需要检查手机的 RTL 或 LTR 状态，您可以使用以下方法进行检查:

    const isDeviceRTL = I18nManager.isRTL;
    if (isDeviceRTL) {
        // ... do something cause device is RTL
    } else {
        // ... do something else cause device is LTR
    }

在您的样式中使用它的其他方法是:

someTextStyle {
    textAlign: I18nManager.isRTL ? 'right' : 'ltr',
    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr'
}

注意:您实际上不需要使用最后一个状态，因为 React 会检测文本，如果您的设备是 RTL 或 LTR 并自动适应，只是想向您展示一个用例

希望对您有所帮助!