ReactNative の Flex レイアウトの概要_html/css_WEB-ITnose

2 月に ReactNative を学習し始めてから 2 か月が経ち、ReactNative に関連するものを書きたいとずっと思っていましたが、まだ学習が進んでいないように感じています。比較的表面的なもので、メモはかなり乱雑でどこから始めたのかわからないので、まだ書き始めていません。清明節の3日間の休暇中に、何が何でも記事を書き上げることにしました。もともと ReactNative レイアウトに関する記事全体を書きたかったのですが、非常に多くのレイアウト属性を見てきたため、CSS については特に詳しくありません。レイアウトの記事はどこから始めればよいでしょうか?そこで、ReactNative の章の冒頭となる、ReactNative のレイアウトの最も重要な側面の 1 つである Flex レイアウトについて要約したいと思います。

Flex は、「柔軟なレイアウト」を意味する Flexible Box の略称で、2009 年に新しい Web ページ レイアウト スキームとして W3C によって提案されました。 FaceBook は、このレイアウトを React および ReactNative プロジェクトにも適用します。 ReactNative では、Web ページの一部の属性と属性値がサポートされていません。ReactNative でサポートされている属性を見てみましょう。 (Flex レイアウトについてあまり詳しくない場合は、「Flex レイアウト チュートリアル: 文法」を参照してください)

1. コンテナ属性:

ReactNative でサポートされているコンテナ属性には、flexDirection、flexWrap、 justifyContent と alignItems。

1. flexDirection 属性

flexDirection 属性には 2 つの値があります。

• row: 主軸は水平です。開始点は左端です
• 列: 主軸は垂直で、開始点は上部です

2. flexWrap 属性

flexWrap属性は軸線が揃わない場合に折り畳むかどうかを定義します。 'wrap' と 'nowrap' という 2 つの値があり、それぞれ改行のサポートと非サポートを表します。デフォルトは 'nowrap' です。

3. justifyContent 属性

主軸の配置。デフォルトは 'flex-start' で、次の 5 つの値があります:

• flex-start: main axis 開始点を揃えます
• flex-end: 主軸の終点
• center: 中心
• space-between: 項目間の等間隔で両端を揃えます
• スペースアラウンド: 各アイテムは両側に等間隔に配置されます。項目間のスペースは、項目と境界線の間のスペースの 2 倍です。

4. alignItems 属性

交差軸の位置合わせ。デフォルトは 'stretch' で、次の 4 つの値があります:

• flex-start : 交差軸の始点の位置合わせ
• flex-end: 交差軸の終点の位置合わせ
• center: 交差軸の中心の位置合わせ
• stretch: コンテナ内のすべての項目がコンテナ全体を埋めるように引き伸ばされます。

2. プロジェクト属性

1. フレックス属性

現在のビューを表示するかどうかこの属性は、プロジェクト属性 justifyContent を無効にする可能性があります。 0 と 1 の 2 つの値があり、0 はいいえ、1 ははいを表し、デフォルトは 0 です。

2. alignSelf 属性

を使用すると、単一の項目を軸の交差方向に他の項目とは異なる位置に配置できます。この属性は、「auto」を除く 5 つの値を持ちます。 '。その他は alignItem 属性とまったく同じで、デフォルトは 'auto' です。

あとがき

フロントエンド開発を経験したことのない私のような iOS 開発プログラマーにとって、初めて ReactNative に触れたとき、私は 2 つのことに直接混乱しました。1 つは構文です。もう 1 つは Flex レイアウトです。レイアウト内のその他の属性 (下、左、マージンなど) は文字通り理解できますが、Flex レイアウトは確かにこれまで見たことがないもので、内部の概念を理解していないと使用できません。それ。幸いなことに、私は Ruan Yifeng 先生の Flex レイアウト チュートリアル: 文法の記事を見つけて、すぐに Flex レイアウトをマスターしました。 ReactNative 開発のここ数日で、Flex レイアウトの重要性をますます認識するようになりました。上記の属性をすべて明確に理解し、それらを柔軟に使用できれば、ReactNative 開発の旅がより便利になることは間違いありません。

リファレンス:

フレックス レイアウトのチュートリアル: 文法フレックスボックス (フレックスボックス)