React Native 将文本方向设置为 RTL（非自动）

Question

我有一些Text带有动态加载文本的元素。这是一种 RTL 语言（希伯来语）文本，其中混有一些英语。

1. 当第一个字符为英文时，自动设置为LTR方向。
2. 当第一个字符是希伯来语时，它自动设置为 RTL 方向。

我对这种行为很不满意！

无论如何，我想将元素设置为 RTL。总是。

在 CSS 中，这将非常简单： text-align: right; direction: rtl;

我怎样才能在 React Native 中实现同样的目标？

Answer 1

当我遇到这个问题时（RTL 语言中的各行文本被错误地视为 LTR，因为它们以非音译的 LTR 文本或数字开头），我使用Unicode 方向标记字符来处理它。

\n

它们在这里（它们是引号之间的不可见字符）：

\n

\n
• \'\xe2\x80\x8f\'强制将文本视为 RTL
\n
• \'\xe2\x80\x8e\'强制将文本视为 LTR
\n

\n

这些改变了您所看到的行为，明确说明应如何处理文本而不是让系统假设。

\n

如何应用这些取决于您。useTranslation我主要使用源内容中的正则表达式查找替换插入来完成此操作，但您可以执行类似的操作（未经测试），对\ 的函数进行交换替换，将t文本包装在适当的 Unicode 控制字符中：

\n

import { I18nManager } from \'react-native\'\n// assuming you\'re using i18n hooks\nimport { useTranslation } from \'react-i18next\'\n\nconst rtlMarkerChar = \'\xe2\x80\x8f\'\nconst ltrMarkerChar = \'\xe2\x80\x8e\'\nconst directionChar = I18nManager.isRTL ? rtlMarkerChar : ltrMarkerChar\n\n// Use instead of `useTranslation` to force text right on RTL and left on LTR\n// regardless of the initial character of the particular snippet of text\nexport const useLocaleAlignedText = () => {\n  const { t } = useTranslation()\n  return (key) => `${directionChar}${t(key)}`\n}\n\n// For example, this should be consistently RTL or LTR regardless of content\nconst SomeComponent = ({ contentKey }) => {\n  const t = useLocaleAlignedText()\n  return <Text>{t(contentKey)}</Text>\n}\n

\n

请注意，当您的内容包含换行符时，上述方法可能不起作用，您可能需要在每行的开头插入控制字符。这是我选择将角色注入到源材料中的原因之一；但也要注意，这是一项艰苦的工作，而且很容易犯错误。

\n

Answer 2

我用以下方法做到了这一点：

textAlign:'right'

你的文本应该有这种风格。