React Native中阿拉伯语文本排版无法匹配目标样式如何解决

核心问题点 #

• 结构拆分错误：当前代码将阿拉伯语经文、经文序号拆分为两个独立的Text组件垂直排列，参考效果中序号是内嵌在经文文本流末尾的 inline 元素，并非单独居中换行的独立块
• 排版属性缺失：未配置阿拉伯语必需的RTL（从右到左）书写方向、行高、两端对齐规则，阿拉伯语为右向书写语言，默认LTR排版会导致字形错位、行参差不齐
• 无效代码残留：第一个Text组件的样式数组中混入了无意义的enter code here占位字符串，会导致样式解析异常
• 样式错配：给文本组件添加了Layout.center块级居中样式，破坏了阿拉伯语的自然文本流排列

修正后代码 #

return (
  <View style={[Layout.center, { width: '100%', paddingHorizontal: 16 }]}>
    <Text
      style={[
        Common.fontFamilyOthmani,
        Fonts.textRegular,
        { 
          color: Colors.blackTextColor,
          writingDirection: 'rtl',
          textAlign: 'justify',
          lineHeight: 48,
          paddingHorizontal: 8
        },
      ]}
    >
      {props.data.verse_arabic}
      {' 〘' + props.data.verse_number + '〙'}
    </Text>
  </View>
)

额外配置说明 #

• React Native 环境需要在项目入口开启RTL支持，添加配置：

import { I18nManager } from 'react-native';
I18nManager.allowRTL(true);

• 确认加载的fontFamilyOthmani对应标准古兰经排版用的 KFGQPC Uthmanic Script HAFS 字体，普通阿拉伯字体无法还原参考图的经文连写、标音规范效果
• 行高参数可根据实际使用的字体大小微调，保证经文上下标音符号不会被裁切
• 移除原序号Text组件上的tinyHMargin等多余边距配置，序号和经文之间的空隙通过字符串内的空格控制即可

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