ネイティブ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のバージョンは、最初の行の先頭をカット、下パディング/マージンを追加最初の行は正しく見えません。一方、アンドロイド版は期待通りに出力されています。

これはなぜ起こっているのでしょうか？

編集： コードから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>