React native 反应本机IOS/Android风格差异

我一直在尝试在我的React原生应用程序中创建一个函数，该函数输出带有dropcap的段落。以下是我使用的代码：

export function returnFirstParagraph(contentRef) {
 return (
  <View>
      <View style={{ flex: 1, flexDirection: 'row', marginTop: 40, marginBottom: 10 }}>
        <Text style={{ fontSize: 16, lineHeight: 28, alignSelf: 'flex-start' }}>
          <Text style={{ fontSize: 40, lineHeight: 28, }}>
            {contentRef.charAt(0)}
          </Text>
            {contentRef.slice(1)}
        </Text>
      </View>
   </View>
  );
}

导出函数returnfirst段落（contentRef）{
返回(
{contentRef.charAt（0）}
{contentRef.slice（1）}
);
}

contentRef

只是一个从另一个文件传递的字符串，它包含相关文本

以下是iOS输出：

以下是Android版本：

正如你所看到的，iOS版本删去了第一行的顶部，在第一行下面添加了填充/边距，看起来不太对劲。与此同时，正如我所预期的，Android版本正在被输出

有人能解释为什么会发生这种情况吗

编辑： 建议从代码中删除线宽。这改变了情况，但没有解决问题：

iOS：

安卓：

---

问题在于

线宽值。删除该选项，然后按如下方式尝试

<View style={{ flexDirection: 'row', marginTop: 40, marginBottom: 10 }}>
    <Text style={{ fontSize: 16, padding: 20 }}>
      <Text style={{ fontSize: 40}}>
        {contentRef.charAt(0)}
      </Text>
      <Text style={{ lineHeight: 28}}>
        {contentRef.slice(1)}
      </Text>
    </Text>
  </View>


{contentRef.charAt（0）}
{contentRef.slice（1）}
问题在于
线宽值。删除该选项，然后按如下方式尝试

<View style={{ flexDirection: 'row', marginTop: 40, marginBottom: 10 }}>
    <Text style={{ fontSize: 16, padding: 20 }}>
      <Text style={{ fontSize: 40}}>
        {contentRef.charAt(0)}
      </Text>
      <Text style={{ lineHeight: 28}}>
        {contentRef.slice(1)}
      </Text>
    </Text>
  </View>


{contentRef.charAt（0）}
{contentRef.slice（1）}
这会有所不同，但在iOS中，第一行下的空格仍然比其他空格大。此外，UI需要行距，因为段落行距意味着段落之间有相当数量的垂直空白。Android版本增加了一吨的间距-我更新了我的原始问题，将此设置的填充显示在顶部
，并检查它是否有效-填充只是作为一个块出现在文本元素周围，不会以任何方式影响行距。这会有所不同，但在iOS中，第一行下的空间仍然比其余的间距大。此外，UI需要行距，因为段落行距意味着段落之间有相当数量的垂直空白。Android版本增加了一吨的间距-我更新了我的原始问题，将此设置填充显示在顶部
，并检查它是否有效-填充只是作为块显示在文本元素周围，不会以任何方式影响行距。