リアクションネイティブiOSのレスポンスレイアウト

Question

私は最初のReactネイティブアプリケーションをiOSアプリケーションストアに展開しようとしています。しかし、私はレイアウトになると問題を抱えています。私はflexboxシステムを利用しており、現在iPhone 6向けに設計しています。私はすべてのモックアップとスケッチを行い、どのように見たいかをすべて持っています。

iPhone 4でアプリケーションを実行しようとすると、いつでも問題が発生しています。私がiPhone 6用に実装した設計は、iPhone 4が持つ制約に適合しません。

私はiPhone 4のためのものを再設計しようとすることができますが、物事は小さすぎる/醜いです。私は本当にすべての画面解像度（すなわち、iPhone 4 - iPhone 7 plus） 。

私はWeb上でさまざまなソリューションを見てきました。各スタイルシートの値に定数を適用し、デバイスの縦横比に依存します。デバイスをチェックして、使用中のデバイスに基づいてさまざまなコンポーネントをレンダリングします。レイアウトを応答させるためにflexboxをよりよく使用してください。

第1の解決策は、各画面サイズで正確な表現が得られないように見えるが、第2の解決策はスタイリングのために過剰なコードを作成するようであり、第3の解決策は静的サイズおよびフォントサイズ。

私は通常、第三の溶液に従うことを始めるだろうが、単にコンテナ（例えば、ボタンの高さ、フォントサイズ、いくつかのマージンとパディングなど）

の割合にすることはできませんいくつかのものがありますしたがって、私は質問をしています：React Nativeでこの問題にアプローチする最善の方法は何ですか？私は本当に開発プロセスを進める最良の方法を説明できる徹底的な事実上の回答が必要です（例えば、最小の画面サイズで設計し、それをより大きなサイズに合わせる必要がありますか？等。）。

私の痛みを感じ、素晴らしい解決策を発見した方々には、事前に大きな感謝の意を表します。その解決策を教えてください。

Answer 1

私は今これをやっていく方法を理解していると思います。iOSの複数の画面サイズを設計するための鍵は、大型の携帯電話では小さく、小型の携帯電話では小さくするのではなく、最小の画面サイズで動作するものを設計し、デバイス。

このタイプのレスポンシブデザインの背後にあるアイデアは、携帯電話のサイズが大きい人は、爆発したコンテンツではなく、より多くのコンテンツを見たいと考えているようです。したがって、小型の電話機で動作する場合は、大型電話機でも動作します。

ボタンを取る：40ptのボタンがiPhone 4sでうまく見える場合は、iPhone 7 Plusでもうまく動作します。利点は、iPhone 7 plusのユーザーは、より大きなボタンではなく、より多くのコンテンツを見ることができることです。

このデザインでは、スタイリングに複数の画面サイズを必要としない場所にも対応しています。

あなたのデバイスの寸法を決める役割はまだありますが、これはあなたがもっと多くのコンテンツを表示できるかどうかを判断することです（iPhone 5とiPhone 6の場合、追加のタブボタンを表示する）、レイアウト（例えば、どこにメニューを配置すべきか）などが含まれます。

非常によく使用されているほとんどのWebアプリケーションのネイティブアプリで、このタイプのデザインを見ることができます。

画像と動画は唯一の例外です。デバイスとデザインがそれを要求するときはいつでも、イメージを自動的に拡大することが時々役立つようです。幸運なことに、これはフレックスボックスと反応ネイティブに含まれる反応性技術を使用することで非常に簡単です。

これは他人を助けて時間を節約してくれることを願っています。注：これは、景観対ポートレートの問題を提供しません。そのような状況下では、さまざまなスタイルを使用するのが最善の方法でしょう。

Answer 2

私は有用なブログabout medium Responsive Design in React Nativeを読んでいます。私はそれを試す時間がなかったが、私はそれがあなたの問題を解決すると思う、それはあなたのためにどのように動作するか教えてください。

Answer 3

私はあなたの痛みを感じ、Shukarullah Shahが言及したblog postに似た、あなたの最初のものと同様の解決策を選択しました。私のstyle.jsファイルでは、まずデバイスの幅と高さを取得します。

const x = Dimensions.get('window').width; 
const y = Dimensions.get('window').height; 

そして私は、それはのようになる幅10、20及び40にそれぞれ寸法、xとyを、分割し;

const widthS = x/40; // ~10 px 
const widthM = x/20; // ~20 px 
const widthL = x/10; // ~40 px 

そしてまた、私は私が持っている各コンポーネントに共通style.jsファイルを使用するマージン、パディング、画像サイズ等のための任意のサイズを定義するためにこれらの値を使用します。だから私はこれらの定数を一度定義して、私が簡単に持っているすべてのスタイル・ピースを見たり比較したりすることができます。もちろん、上記のブログ記事のように、これらの定義を改善することができます。しかし、私はデザイナーではない開発者であり、完全な比率についてはあまり鋭敏ではありません。