iPhone 6sのフォントサイズ+

Question

XCode/Simulatorsで最初のiOS/Reactネイティブアプリをテストしているときに、古いiPadデバイスでアプリがうまく見えますが、サイズはすべて問題ありません。しかし、新しいiPhone 6s plusデバイスでは、すべてが超小型、テキスト、マージンであり、パディングは2倍以下であるべきです。それは応答性の問題ですか？私はPixelRatio APIを使用すると思いますが、それはすべてを解決するでしょうか？私はAndroid上で私のアプリケーションを移植すると、それはまだ正常に動作しますか？

var myStyle = { 
    Post: { 
    width: PixelRatio.getPixelSizeForLayoutSize(200), 
    margin: PixelRatio.getPixelSizeForLayoutSize(100), 
    } 
} 

だけではなく：

var myStyle = { 
    Post: { 
    width: 200, 
    margin: 100, 
    } 
} 

そして、それが今の私のスタイルのすべてをそれを意味し、私は次のように記述する必要がありますか？

Answer 1

短い答えははいです。すべてのフォントの応答性を考慮する必要があります。私が使った方法はいくつかあります。

前述のとおり、getPixelSizeForLayoutSizeを使用できます。

static getPixelSizeForLayoutSize(layoutSize: number): number { 
    return Math.round(layoutSize * PixelRatio.get()); 
} 

ことに問題がPixelRatio.getは、次の値を返すということです：

* PixelRatio.get() === 1 
    *  - mdpi Android devices (160 dpi) 
    * - PixelRatio.get() === 1.5 
    *  - hdpi Android devices (240 dpi) 
    * - PixelRatio.get() === 2 
    *  - iPhone 4, 4S 
    *  - iPhone 5, 5c, 5s 
    *  - iPhone 6 
    *  - xhdpi Android devices (320 dpi) 
    * - PixelRatio.get() === 3 
    *  - iPhone 6 plus 
    *  - xxhdpi Android devices (480 dpi) 
    * - PixelRatio.get() === 3.5 
    *  - Nexus 6 

基本的には数に渡さ返すことを意味します* getPixelSizeForLayoutSizeは、基本的には、ボンネットの下に次のようになりますiPhone6の場合は2、iPhone6 Plusの場合は* 3です。通常、iPhone6Plusのフォントサイズが大きすぎるため正しく調整されません。 iPhone6とiPhone4も同じ処理を受けますが、これは最適ではありません。

私たちがこれを解決するために行ったことは、デバイスの高さを計算してサイズを返すヘルパー関数を書くことです。

この正確な実装は正確に何をしたいではないかもしれないが、それは私たちのために持っているとして、次のいくつかのバリエーションは、おそらくあなたのためにこれを解決するだろうが：

var React = require('react-native') 
var { 
    Dimensions 
} = React 

var deviceHeight = Dimensions.get('window').height; 

export default (size) => { 
    if(deviceHeight === 568) { 
     return size 
    } else if(deviceHeight === 667) { 
     return size * 1.2 
    } else if(deviceHeight === 736) { 
     return size * 1.4 
    } 
    return size 
} 

次に、このようにそれを使用します。

var normalize = require('./pathtohelper') 

fontSize: normalize(14), 
borderWidth: normalize(1) 

これは、getPizelRatioForLayoutSizeの元の実装により近い別の方法です。唯一の問題は、あなたがまだiPhone6とiPhone4の値が同じに返さ取得しているので、それは少し正確ですが、getPizelRatioForLayoutSizeネイティブより良い作品：このようにそれを使用すると

var React = require('react-native') 
var { 
    PixelRatio 
} = React 

var pixelRatio = PixelRatio.get() 

export default (size) => { 
    if(pixelRatio == 2) { 
     return size 
    } 
    return size * 1.15 
} 

：

var normalize = require('./pathtohelper') 

fontSize: normalize(14), 
borderWidth: normalize(1)