[react Native]レイアウトシステム

1.RNでレイアウトを作成するには、Flexboxを使用する必要があります。

いくつかの例外を除いて、これはネットワークとほぼ似た方法だと言われています.
display:block、display:inline-block、display:gridなどはありません.
1つ目はdefault値で、互いに上にあります.


一番上のViewタグのスタイルでは、
flexDirectionのお金をくれれば.

<View style = {{flexDirection : "row"}} >

Web上に「flex」と表示されている場合のみ、flexDirectionを実行できます.
React Nativeでは、Container Viewは既にFlex Containerです.したがって、デフォルトでは、すべてのビューはFlex Containerです.
また、デフォルトではflex-directionはColumnです.
Web上ではflex-directionは基本的にrowです.
RNでは、オーバーフロー(レイアウトが画面から離れている)があってもスクロールできません.これはブラウザではないからです.

2.99.8%の確率で、RNは幅と高さに基づいたレイアウトを作成しません。

高さと幅のレイアウトに依存するのは非常に悪い考えだからです.これはスクリーンサイズによって異なります.
だから反応型の設計を考えなければなりません.
多くの画面で同じように見えるレイアウトを考える必要があります.
アイコンやアイコンがあればwidthやheightが使えるかどうか分かりませんが、レイアウトでは使いません.繰り返しますが、200 pxはこのように見えるかもしれませんが、より小さな画面では底が見えないかもしれません.

3.How to RN Layout-数字のみを考慮

RNのすべてのビューがFlex Containerであることが分かった.Flex Sizeにあげます.


同じサイズのレイアウトが表示されます.
これがRNレイアウトの魔法機能です.
私たちは割合だけを話したからです.
flexの値を変更したらどうなりますか?
backgroundColor氏は「最初のトマトビューのflexを3に設定した結果です.

親としてのViewは本当に重要です.そうなると比率の基準点が消えてしまうからです.たとえば、上記の場合、最初のビューは何の3倍ですか.
flexの横の数字は、他のビューの横にある場合にのみ意味があることを覚えておいてください.
たとえば、現在のレイアウトでは、親ビューのflexを50に変更しますが、変更はありません.どうしたんですか.親ビューの横に他のビューがないためです.

結論:React Nativeの基準値とスケールにより、レイアウトの作成が容易になります。

Vscodeでマルチカーソルを使用したい場合は、Shift+Alt+Clickだけです.

https://nomadcoders.co/react-native-for-beginners/lectures/3123