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 方向标记字符.

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

• '‏' 到 force text to be treated as RTL
• '‎' 到 force text to be treated as LTR

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

如何应用这些取决于您。我主要是在源内容中使用正则表达式查找替换插入来做到这一点，但你可以做这样的事情（未经测试），对 useTranslation 的 t 函数进行换入替换，该函数将文本包装在适当的 Unicode 中控制字符：

import { I18nManager } from 'react-native'
// assuming you're using i18n hooks
import { useTranslation } from 'react-i18next'

const rtlMarkerChar = '‏'
const ltrMarkerChar = '‎'
const directionChar = I18nManager.isRTL ? rtlMarkerChar : ltrMarkerChar

// Use instead of `useTranslation` to force text right on RTL and left on LTR
// regardless of the initial character of the particular snippet of text
export const useLocaleAlignedText = () => {
  const { t } = useTranslation()
  return (key) => `${directionChar}${t(key)}`
}

// For example, this should be consistently RTL or LTR regardless of content
const SomeComponent = ({ contentKey }) => {
  const t = useLocaleAlignedText()
  return <Text>{t(contentKey)}</Text>
}

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

Answer 2

我是这样做的：

textAlign:'right'

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