2017-01-10 14 views
8

下の画像では、左側のAndroidと右側のiOSでレンダリングされたのと同じテキストコンポーネントを調べました。 iOSがフォントをテキストコンテナの上にレンダリングするようです。React Native:AndroidとiOSでカスタムフォントレンダリング

私はAndroidとiOSの両方で同じTTFフォントファイルを使用しています。 (私はhereを使用しているフォントのオンラインリファレンスを見つけました)

フォントを作成する方法は、AndroidとiOSの両方で同じですか?

enter image description here

ちょうど明確にするために、差は任意のスタイリング(余白、フォントサイズなど)によって引き起こされていません。それはまったく同じです。

答えて

5

修正が見つかりましたが、正しくはありません。私はあなたが各デバイスで同じレンダリングする別のフォントを見つける必要がありますと思います。

イオス:

instructions: { 
    fontFamily: 'Metric-Regular', 
    fontSize: 50, 
    lineHeight: 50, 
    paddingTop: 25, 
    marginBottom: -35, 
    marginTop: 35 
    } 

enter image description here

+1

おかげで、これは本当に助け

あなたはテキストコンポーネントの同じ垂直方向の配置を取得するにはlineHeightpaddingmarginで遊ぶことができます私は解決策を見つけるために!複数行のテキストをサポートする必要があるので、私はあなたのように高さを設定することはできません。しかし、それは、テキストのコンポーネントの一番下にパディングを追加し、Textコンポーネントの下部に負のマージンを追加すると、両方の値がフォントサイズに比例して動作するように見えます。 – henkimon

+0

@henkimonありがとう、私は助けてうれしいです。ご覧のとおり、私はあなたのコメントに基づいて私の答えを改善しました。あなたがそれを受け入れることができれば、それは私にとって世界を意味するでしょう。 – AlexB

関連する問題