React Native阿拉伯文本两端对齐且末行右对齐实现方案咨询

方案1：调整文本方向基础样式 #

首先确保阿拉伯文本的方向设置为从右到左（RTL），结合textAlign: 'justify'，部分场景下能自动让末行右对齐：

<Text style={{
  textAlign: 'justify',
  direction: 'rtl',
  fontSize: 16,
  width: '100%',
  paddingHorizontal: 16
}}>
  هذا نص عربي طويل يجب أن يكون محاذاة على الجانبين مع السطر الأخير محاذاة لليمين.
</Text>

如果文本已设置RTL方向但末行仍左对齐，再尝试下面的自定义组件方案。

方案2：自定义组件拆分文本控制末行 #

通过计算文本行宽，将文本拆分为多行，单独对最后一行设置右对齐。以下是基于单词宽度精确分割的实现：

import React, { useState, useEffect, useRef } from 'react';
import { Text, View } from 'react-native';

const JustifiedArabicText = ({ text, textStyle }) => {
  const [containerWidth, setContainerWidth] = useState(0);
  const [lines, setLines] = useState([]);
  const hiddenTextRef = useRef(null);

  useEffect(() => {
    if (!containerWidth || !hiddenTextRef.current) return;

    // 测量文本宽度的工具函数
    const getTextWidth = (txt) => new Promise(resolve => {
      hiddenTextRef.current.measureText(txt, width => resolve(width));
    });

    // 按容器宽度分割文本为多行
    const splitText = async () => {
      const words = text.split(' ');
      const lineList = [];
      let currentLine = [];
      let currentLineWidth = 0;

      for (const word of words) {
        const wordWidth = await getTextWidth(`${word} `);
        if (currentLineWidth + wordWidth <= containerWidth) {
          currentLine.push(word);
          currentLineWidth += wordWidth;
        } else {
          lineList.push(currentLine.join(' '));
          currentLine = [word];
          currentLineWidth = wordWidth;
        }
      }
      // 添加最后一行
      if (currentLine.length) lineList.push(currentLine.join(' '));
      setLines(lineList);
    };

    splitText();
  }, [text, containerWidth]);

  return (
    <View 
      onLayout={e => setContainerWidth(e.nativeEvent.layout.width)}
      style={{ width: '100%' }}
    >
      {/* 用于测量文本宽度的隐藏文本 */}
      <Text ref={hiddenTextRef} style={{ ...textStyle, opacity: 0, position: 'absolute' }}>
        {text}
      </Text>
      {lines.map((line, idx) => (
        <Text
          key={idx}
          style={{
            ...textStyle,
            textAlign: idx === lines.length - 1 ? 'right' : 'justify',
            direction: 'rtl'
          }}
        >
          {line}
        </Text>
      ))}
    </View>
  );
};

// 使用示例
export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <JustifiedArabicText
        text="هذا نص عربي طويل يجب أن يكون محاذاة على الجانبين مع السطر الأخير محاذاة لليمين. يمكن أن يحتوي هذا النص على كلمات مختلفة بأحجام مختلفة لاختبار الدقة."
        textStyle={{ fontSize: 16, lineHeight: 24 }}
      />
    </View>
  );
}

优势：精度高，适配不同字体和字符宽度；不足：需要异步测量文本，首次渲染会有微小延迟。

方案3：原生扩展（适合有原生开发能力的团队） #

如果上述方案都无法满足需求，可以自定义原生Text组件，在iOS和Android端分别实现末行右对齐的支持：

• iOS：在原生UITextView或UILabel中设置textAlignment = NSTextAlignmentJustified，同时设置lastLineTextAlignment = NSTextAlignmentRight
• Android：在原生TextView中设置android:justifyText="true"和android:textAlignLast="viewEnd"

然后通过React Native桥接暴露给JS层使用，这种方式最接近原生效果，但需要额外的原生开发工作量。

内容的提问来源于stack exchange，提问作者famdude