ReactNative の Flex レイアウトの概要_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:52 AM

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 開発の旅がより便利になることは間違いありません。

リファレンス:

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

See all articles