React Native IOS / Android风格差异

Question

我一直在尝试在我的React Native应用程序中创建一个函数，该应用程序输出带有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>
  );
}

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

以下是iOS输出：

这是Android版本：

正如您所看到的，iOS版本会切断第一行的顶部，在第一行添加填充/边距并且看起来不正确。与此同时，Android版本正在按照我的预期输出。

有谁能说明为什么会这样？

修改 有人建议从代码中删除lineHeight。这改变了事情，但没有解决问题：

的iOS：

机器人：

Answer 1

问题在于lineHeight值。删除它并尝试如下

<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>