React Native IOS/Android 风格区别

Question

我一直在尝试在我的 React Native 应用程序中创建一个函数，该函数输出一个带有首字下沉的段落。这是我正在使用的代码：

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>