2016-04-06 12 views
1

私は基本的なビュー、テキスト、画像、およびボタンが反応した最小限のアプリを持っています。私が直面している問題は、複数のデバイスのレイアウトを管理することです。 複数のデバイス(複数の画面解像度と画面サイズ)の同じ(比例した)表示&のフォントサイズをどのように維持することができるかについてのご提案です。複数のデバイスに固有の定型レイアウトに反応する

閲覧: たとえば、各行に左に1つの画像、右に2つのボタン(下に1つずつ)のテキスト(flex-direction: 'column')があるアイテムのリストビューが必要な場合、私はこのデバイスを5インチデバイスと10インチデバイスの両方で使いやすくしていますか?

さらにボタンにはborderRadiusがあるとします。ボタンをスケーリングする場合は、borderRadiusの値も増やす必要があります。これをどのように達成するのですか?

フォント: 私はPixelRatio.getFontScale()を使用しようとしましたが、これは(私が理解したところから)解像度のみに応じてフォントの縮尺を変えています。これを使用すると、解像度がより高い5インチデバイスではサイズ12のフォントが大きくなり、解像度がより低い10インチデバイスではフォントが小さくなります。だから、反応するネイティブアプリのフォントサイズをどのように管理できますか?

答えて

0

PixelRatio.getFontScale()に加えて、Dimensions APIを使用して、ウィンドウの高さと幅を取得し、それに関連してコンポーネントを拡大縮小することもできます。私は、iOSとAndroidの両方で動作するアプリを構築し、これを使って幅の高さを調整しています。

アウトリンクDimensions @ Facebook - React Native

すなわち。あなたは両方を使用する方法について詳しく説明してもらえ

Dimensions.get('window').width; Dimensions.get('window').height;

はあなたの窓

+0

のサイズを返すのだろうか?私はそれらを個別に使用しようとしましたが、期待した結果が得られませんでした。 –

+0

[This Medium post](https://medium.com/@elieslama/responsive-design-in-react-native-876ea9cd72a8#.hi8cgrp8d)では、Dimensions APIを使用してデバイスの幅に基づいてレイアウトを変更する方法について説明しています。 –

関連する問題