React Native(Expo)开发古兰经阅读App 文本格式化问题求助

修复方案 #

问题对应修复点 #

• 文本自动调整大小：删除外层Text组件的adjustsFontSizeToFit属性，该属性会自动缩放文本适配容器宽度，是文字大小异常的直接原因
• 随机间距：删除surahPage、ayat样式中多余的flex:1配置，文本嵌套时使用flex属性会导致RN布局计算异常，出现随机间距
• 段落末尾左对齐：RN默认的textAlign: justify对阿拉伯语这类RTL语言适配不完善，需额外添加textAlignLast: 'justify'、writingDirection: 'rtl'属性，同时全局开启RTL适配，即可实现段落最后一行也两端对齐的效果

额外优化 #

把每节经文和对应的编号用View包裹做横向排版，避免多层Text嵌套导致的布局异常，同时用flexDirection: 'row-reverse'适配阿拉伯语从右到左的阅读顺序，编号放在经文左侧。

修改后完整代码 #

import { I18nManager, SafeAreaView, ScrollView, Text, View, StatusBar, StyleSheet } from 'react-native';

// 全局开启RTL适配，阿拉伯语场景必须配置
I18nManager.forceRTL(true);
I18nManager.allowRTL(true);

function Read(){
    return (
    <SafeAreaView style={styles.container}>
      <HeaderSurahScreen navigation={navigation} route={route} />
      <Divider
        orientation="vertical"
        width={5}
        style={{ borderBottomColor: "#545353" }}
      />

      <ScrollView style={styles.scroll}>
        {surah &&
          surah.map((ayat, index) => (
            <View key={index} style={styles.ayatContainer} >
              <Text selectable={true} style={styles.ayat}>
                {ayat.text}
              </Text>
              <Text style={styles.number}>{toArabic(ayat.id)}&#1757;</Text>
            </View>
          ))}
      </ScrollView>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: DEFAULT_BACKGROUND_COLOR_THEME,
  },
  scroll: {
    flex: 1,
    padding: 7,
  },
  ayatContainer: {
    flexDirection: 'row-reverse',
    alignItems: 'flex-start',
    marginVertical: 8,
    width: '100%'
  },
  ayat: {
    fontFamily: ARABIC_FONT,
    color: DEFAULT_COLOR_THEME,
    fontSize: 30,
    marginLeft: 10,
    flexShrink: 1,
    textAlign: "justify",
    textAlignLast: 'justify',
    writingDirection: 'rtl',
    lineHeight: 45,
  },
  number: {
    fontSize: 18,
    color: DEFAULT_COLOR_THEME,
    marginTop: 10
  },
});

兜底方案 #

如果textAlignLast属性在你的设备上不生效，可以改用支持阿拉伯语RTL对齐的第三方排版库，或提前把经文按行拆分后手动控制每行排版。

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