无法在本机反应中格式化古兰经页面

Question

我正在制作一个应用程序来阅读古兰经，使用本机反应（世博会）。我在格式化文本时遇到一些问题。

问题：

• 随机间距
• 自动调整文字大小
• 文本最后在左侧对齐。

这是我的代码：

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

      {/* create a logic here to display tranlition or arabic */}
      <ScrollView style={styles.scroll}>
        <Text style={styles.surahPage} adjustsFontSizeToFit>
          {surah &&
            surah.map((ayat, index) => (
              <Text key={index} allowFontScaling={false} selectable={true}>
                <Text selectable={true} style={styles.ayat}>
                  {ayat.text}
                </Text>
                <Text style={styles.number}>{toArabic(ayat.id)}&#1757;</Text>
              </Text>
            ))}
        </Text>
      </ScrollView>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: DEFAULT_BACKGROUND_COLOR_THEME,
  },
  scroll: {
    flex: 1,
    padding: 7,
  },
  surahPage: {
    flex: 1,
    marginTop: 15,
    textAlign: "justify",
  },

  ayat: {
    flex: 1,
    fontFamily: ARABIC_FONT,
    color: DEFAULT_COLOR_THEME,
    fontSize: 30,
  },

  number: {
    fontSize: 18,
    color: DEFAULT_COLOR_THEME,
  },
});

截图(3)：

我正在寻找的结果：

Answer 1

要使文本中的文本对齐，您需要使用justify使所有行具有相同的长度，而且您还需要添加一个属性direction以使对齐到右侧。

direction: "rtl";
textAlign: "justify"

您可能想看看这个： http://jsfiddle.net/aew75/

不幸的是，我担心我不知道如何解决来自 的单词之间的空格问题justify。无法像 mushaf 那样扩展字母大小和宽度。这对于网络和显示器上的阿拉伯字体使用来说是一个革命性的想法。也许可以尝试一下，并让其他穆斯林/阿拉伯开发人员做出贡献:)