react-native - 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版把第一行的顶部剪掉了，在第一行下面加了padding/margin，看起来不太对劲。与此同时，正如我所料，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>