Réagir Différence de style IOS/Android natif

Question

J'ai essayé de créer une fonction dans mon application React Native qui génère un paragraphe avec un dropcap. Voici le code que je utilise:

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 est simplement une chaîne qui est passée d'un autre fichier et contient le texte pertinent.

est ici la sortie iOS:

Et voici la version Android:

Comme vous pouvez le voir, les coupes de la version iOS du haut de la première ligne, ajoute padding/marge sous la première ligne et ne regarde pas bien. La version Android, quant à elle, est sortie comme je m'y attendais.

Quelqu'un peut-il suggérer pourquoi cela se produit?

Editer: Il a été suggéré d'enlever lineHeight du code. Cela a changé les choses, mais pas résolu le problème:

iOS:

Android:

Answer 1

Le problème est avec la valeur lineHeight. Supprimez cela et essayez comme ci-dessous

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