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

Question

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

react-native

9

我有一些包含动态加载文本的

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

我不喜欢这种行为！

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

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

在React Native中，我该如何实现相同的效果？

- Poni

5个回答

3

处理RTL文本，请使用样式alignSelf: 'flex-start'

例如React Native：

<View> 
   <Text style={styles.headersText}>{headerTitle}</Text>  
</View> 

StyleSheet.create({ headersText: {
      alignSelf: 'flex-start', // <- Here Handle RTL for Text
      paddingHorizontal: 16,
      paddingTop: 14,
      color: 'black',
      fontSize: 13,
    },   
});

- Ahmed Lotfy

不要在文本样式中添加 flex: 1，因为它会使 Text 扩展并始终对齐到左侧。 - Ahmed Lotfy

这是一个很好的解决方法，对我非常有效！ - P. Navarro

1

有几种方法可以在React Native中实现文本的RTL，这取决于您的偏好和用例：

选项1：使用`alignSelf: 'flex-start'`样式属性，例如

<Text style={{alignSelf: "flex-start"}}>your text here</Text>

这种方法是一种对文本语言敏感的方法，它会根据文本语言自动调整文本对齐和书写方向。例如，如果文本是英文，则文本的对齐方向将为从左到右，并且整个文本将左对齐；而如果文本是阿拉伯文，则文本的对齐方向将为从右到左，并且整个文本将右对齐。 选项2： 根据React Native Text文档，您可以在IOS上使用writingDirection: "rtl"属性，在Android上使用textAlign: "justify"属性。例如：

import { I18nManager, Text } from "react-native";

<Text style={{
    writingDirection: I18nManager.isRTL ? "rtl" : "ltr", //OR "auto"
    textAlign: "justify"
   }}>
your text here
</Text>

在这种使用justify的Android方法中，它不会根据文本语言来对齐，而是根据应用程序的I18nManager.isRTL敏感性来对齐文本，无论文本是阿拉伯语还是英语，都将使用应用程序的方向状态。它只会根据语言书写方向来对齐文本，与选项1不同。但是对于IOS，您应该编写一个条件来提供动态值，就像上面的示例一样。因此，如果您不想显示混乱的文本，特别是如果您在同一个视图中同时拥有两种语言，即如果您在同一个视图中有两个不同的描述，一个是英语，一个是阿拉伯语，但您希望使两个文本在设计实践中保持相同的文本对齐水平，那么这种方法是首选。

- Anas

0

我用以下代码实现了这个功能：

：

textAlign:'right'

你的文本应该具有这种样式。

- Mahdi

6

这不是将文本方向设为从右到左的方法！ - eyalyoli

如果有人使用UI Kitten框架（或其他框架，也许这会有所帮助），并且在RTL设备设置中（或在代码中强制设置），尝试设置textAlign：“left” - 这将使文本靠右对齐。 - Samih A

这并没有回答问题。 - Brandon Dyer

0

这对我有用：


    <Text style={{alignSelf: "flex-start"}}>
        {text}
    </Text>

顺便说一句，如果你想要在整个项目中强制使用RTL，你可以像这样编写代码，并在主App组件中运行：

import { I18nManager } from "react-native";

const App = () => {
  . . . . . . . . 
  const rtl = () => {
    if (I18nManager.isRTL === false) {
      I18nManager.allowRTL(true);
      I18nManager.forceRTL(true);
    }
  };
  . . . . . . . . 
}

- Itay

只有当容器的flexDirection属性设置为row时，才会起作用。 - doc_id

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user56reinstatemonica8 · Accepted Answer

当我遇到这个问题（RTL语言中的单独文本行由于以非转译的LTR文本或数字开头而被错误地视为LTR）时，我使用了Unicode方向标记字符来解决它。

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

'‏'用于强制将文本视为RTL
'‎'用于强制将文本视为LTR

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

如何应用这些标记取决于您。我主要是在源内容中使用正则表达式查找替换插入来完成的，但您可以像这样做（未经测试），创建一个适当的Unicode控制字符包装文本的useTranslation的t函数的交换替换：

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>
}

请注意，以上方法可能无法在内容中包含换行符的情况下正常工作，您可能需要在每行开头注入控制字符。这也是我选择将字符注入源材料的原因之一；但是请注意，这很费力且容易出错。