React Nativeのフレックスボックスレイアウト詳細解説(わかりやすく)_html/css_WEB-ITnose

返信「1024」 ご存知です

この記事を読むのに必要な時間は約 5 分です

この記事の詳細

この記事では React のレイアウトについて説明しますCSS を使用するネイティブ。フレックス レイアウトをマスターすると、後続の RN アプリケーションの開発に非常に役立ちます。この記事は showCar から寄稿されました (クリックすると原文が読めます)。記事アドレス: http://blog.csdn.net/u014486880

1. よく使用される属性

RN のフレックスボックスには主に次の属性があります: alignItems、alignSelf、flex、flexDirection、flexWrap、justifyContent。

2.flexDirection

このプロパティは、主軸の方向を指定するために使用されます。つまり、サブビューのレイアウト方向を指定します。設定する値は 2 つあります。

• 行: 水平レイアウト。

• 列: 垂直レイアウト。

この属性は非常に単純です。まず行コード スニペットを見てみましょう。

ビューには 4 つの小さなビューがあります。レンダリングを見てください。 4つのビューが横長のレイアウトを作成します。次に、それを列に変更します。スタイルの変更は次のとおりです。 レンダリングを見てください:

は垂直レイアウトです。

3.alignItems

は、サブコンポーネントの垂直方向の配置を定義するために使用されます。設定できるプロパティは、flex-start、flex-end、center、stretch の 4 つです。

flex-start: 親コンポーネントの上部に揃えられます。
flex-end: 親コンポーネントの下部に揃えられます。
center: 親コンテナの中央。
ストレッチ: 容器全体を垂直に満たします。
まず、flex-start を見てみましょう。 ちなみに、サブコンポーネントの色を変更したのは次のとおりです。 レンダリングを見てください:

上部に揃えられています。親コンテナの。

flex-end 属性を確認してください。コードは alignItems 属性を変更するだけです。レンダリングは次のとおりです。

下部に揃えられていることがわかります。もう一度 center を見てみましょう。これは最も一般的に使用される属性であると言えます。レンダリングを見てください:

ストレッチは垂直方向の充填です。子コンポーネントは高さ属性を設定しません。レンダリングを見てください:

4.justifyContent

垂直であれば水平になります。 justifyContent と alignItems は相対的です。これには、flex-start、flex-end、center、space-between、space-around という 5 つのプロパティを設定できます。

flex-start: フレックス項目は親コンテナの左端に揃えられます。
flex-end: 親コンテナの右端に揃えられます。
center: 水平方向の中央揃え。
space-between: 最初の子コンポーネントは親コンテナの左端に配置され、最後の子コンポーネントは親コンテナの右端に配置されます。次に、親コンテナ内で水平方向に均等に配置します。
space-around: すべての子コンポーネントが親コンテナの水平方向に均等に配置され、左右に隙間が残ります。
まず水平方向の中央揃え (中央) を見て、最初にコードを見てみましょう:

親コンテナは justifyContent:'center' 属性を設定しているため、理論的には子コンポーネントは水平方向の中央揃えになるはずです。見てみましょう。それが正しい場合。以下のようになります:

justifyContent:'flex-start'、左側に水平方向:

justifyContent:'flex-end'、右側に水平方向:

これらは非常に単純です。空間を見てみましょう。 -between と space- around との違いは、まず space-between のレンダリングを見てください:

左右に隙間がないことがわかります。均等に分散。もう一度スペースアラウンドのレンダリングを見てください。左右に隙間があり、インターフェース全体の水平方向に均等に配置されています。

5.alignSelf

この属性は、alignItem と少し似た、別個のコンポーネントの垂直方向の配置を設定するために使用されます。設定できるプロパティは、auto、flex-start、flex-end、center、streth の 5 つです。

auto: 自身で設定した幅と高さに従って表示します。設定されていない場合、効果は streth と同じです。
flex-start: 親コンテナの上部に揃えられます。
flex-end: 親コンテナーの底部に位置合わせされます。
center: 縦位置にあります。
streth: 垂直方向のストレッチ。
この使用法は上記と非常に似ていますが、この例のサブビューなどの単一コンポーネントに使用される点が異なります。コードを見てください。上記のサブビューは異なるスタイルに設定されています。レンダリングを見てみましょう:

ご覧のとおり、フレックススタートは上部に、フレックスエンドは下部に位置合わせされています。 3 番目のビューは、垂直に引き伸ばされた streth です。 4番目のViewは高さが設定されているので図のように表示されます。中心は表示されませんが、その効果は想像できるので、再度実証することはありません。

6.flex

Flex は、スケーラブルなアイテムのスケーラブルなスタイルを設定することを指します。Android の Weight 属性と比較できます。コードを見るだけで、その使い方がわかります。 レンダリングは次のとおりです。

flex 2 のコンポーネントの幅は flex 1 の幅の 2 倍であり、flex 4 のコンポーネントの幅は flex 1 のコンポーネントの幅の 4 倍であることがわかります。

7.flexWrap

実際、これらのプロパティはすべて CSS のオリジナルのプロパティですが、RN は一部のプロパティのみをサポートします。 flexWrap はラップできるかどうかを設定するために使用されます。nowrap と Wrap を設定する 2 つのプロパティがあります。

• nowrap: 十分なスペースがない場合でも、行の折り返しは行われません。

• wrap: 十分なスペースがない場合、行を自動的に折り返します。

ラップするように設定されている場合、スペースが十分ではないため、効果は次のようになります:

4 つ目は配置できないため、ラップされます。

8. あと 2 つ

この記事では、フレックス レイアウトについて詳しく説明しています。説明は非常にわかりやすく簡潔です。貢献者に感謝します。

この公開アカウントは、ご希望であれば、どなたでも投稿を歓迎します。あなたの記事をより多くの人が見ることができます。記事を md、doc、その他の形式で私のメールアドレス (781931404@qq.com) に直接送信してください。 QQ/WeChat (781931404) の友人 (送信) を指定する必要があります。ありがとうございます。