2016-03-13 7 views
6

Reactネイティブを使用しているiOSとAndroidの両方で、過去6ヶ月間に最も驚くほど素晴らしい複雑なアプリを作成しました。React Native:9000のAndroid画面サイズを管理するにはどうすればよいですか?

すべてが完璧つもりだった、すべてが素晴らしい働いている...

私は...基本的には同じように動作し、私が書いた特別なコンポーネントを使用して6+、6、5、iPhone 4Sのため

override: { 
    ip4: { fontSize: 8 }, 
    ip5: { fontSize: 10 } 
} 
をデザイン

など

これは実際にはiOS用完璧を働きました。

今日私はGAを開いて、Androidのスタイルを忘れていたことに気づいた。私はGoogleの分析を見て、文字通り... 700の画面サイズはすべて異なっています。

私はこれらすべての設計の見通し、特に複数のピクセル密度を考慮して、全く混乱しています。

私の質問、私は実際に説明するために何をしますかさ...

  • マージン/間隔(パディングまたは何のために基本的に一般的な整数)
  • フォントが

ものでありのサイズ私は非常に混乱している2つのものすべての異なる組み合わせを処理する方法です。

私はPixelRatioを見ましたが、それをどうやって使うのか、正しいトラックにいるかどうかはわかりません。

ほとんどの人がどのようにこれを処理しますか?

+1

をしようとテストに全体の日失われました。あなたは解決策を見つけましたか? –

答えて

0

DimensionsとPixelRatioの両方を使用して、画面のサイズとピクセルを取得できます。私は、例えば

..画面サイズに基づいたサイズの画像を設定するには、例えばこれを使用 :

import Dimensions from 'Dimensions'; 
import PixelRatio from 'PixelRatio'; 

var {height, width} = Dimensions.get('window'); 
var pixelr = PixelRatio.get(); 

// Calculate styles, heights, fontsizes based on the numbers above 
+0

あなたは答えを完了できますか?iOSとAndroidの両方で 'PixelRatio'を使う方法は本当に知りません。あなたはこれを自分でやったのですか? – SudoPlz

+0

@SudoPlzはpixelrを掛けるだけです。 – Hobbyist

0

あなたは複数の画面サイズを管理するためのメディアクエリを使用することができ、私は使用メディアがでコンセプトを照会しました私のphonecap(cordova)開発の初期段階で。

私は検索中にチュートリアルで見つける必要があり、私はそれが便利だと思う、

https://www.npmjs.com/package/react-native-responsive

0

我々はTYO使用を終了し、全てのアプリの周りflexboxes。スペースが利用可能になると、コンテンツはそれ自体に適応します。もちろん

、我々は、インテリジェントな答えがあるだろう期待してこれに戻って確認

関連する問題