React Native_html/css_WEB-ITnose の Flexbox モデル (Flexbox)

モバイル側で最近登場したより優れたテクノロジーがあるとすれば、React Native は間違いなくその 1 つです。一度学習すればどこでも書けるというコンセプトは、依然として非常に魅力的です。ネイティブ開発 (Android、IOS) 人材が不足している中小企業にとって、React Native は良いソリューションと考えられます。私は最近 React Native にも注目しています。数週間読んで調査した結果、フロントエンドの基礎がない場合、学習曲線は依然として比較的急であることがわかりました。 React Native は、フロントエンド担当者が Native を書くのに依然として適しています。ネイティブ開発者にとっては、少し難しいかもしれません。

React Native の知識点はまだ非常に複雑で、1 つや 2 つの記事では明確に説明できないため、React Native についていくつかの記事またはメモを書くことにしました。今日は React Native の Flexbox モデル (Flexbox) について書きます。

まず最初に。 , React Native はスタイルをレンダリングするための CSS を実装していません。代わりに、次のように JavaScript を使用してスタイルを宣言します:

次に、ここで独自に定義したスタイルを使用します:

var styles = StyleSheet.create({  container: {    flexDirection: 'row',      flexWrap:'wrap',    justifyContent:'center',    alignItems:'center',     flex:1,     backgroundColor:'#120056',  },  item:{    width:75,    height:75,    color:'#ffffff',    backgroundColor:'#234567',    margin:10,  },  special:{    width:75,    height:75,    color:'#ffffff',    backgroundColor:'#234567',    margin:10,    alignSelf:'flex-end',  },});

In React Native基本的には Web で一般的なスタイルを使用できます。ここで注目したいのは、React Native によって実装されたフレキシブル ボックス モデルです。

  <View style={styles.container}>    <Text style={styles.item}>      1    </Text>    <Text style={styles.item}>      2    </Text>    <Text style={styles.item}>      3    </Text>    <Text style={styles.special}>      4    </Text>    <Text style={styles.item}>      5    </Text>  </View>

Flexbox モデル (Flexbox)

基本概念

Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。（这里我们称为Flex）。Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。最重要的是，Flexbox布局方向不可预知，他不像常规的布局（块就是从上到下，内联就从左到右）。而那些常规的适合页面布局，但对于支持大型或者杂的应用程序（特别是当他涉及到取向改变、缩放、拉伸和收缩等）就缺乏灵活性。注：Flexbox布局最适合应用程序的组件和小规模的布局，而网格布局更适合那些更大规模的布局。

主軸: 主軸、伸縮コンテナの主軸は通常、この軸に沿って配置されます。

• Main Start: スピンドルの開始位置。
• メインエンド: スピンドルのエンド位置。
• 交差軸: 主軸に垂直な軸を交差軸と呼びます。
• 交差軸の開始位置。
• Cross End: 交差軸の終了位置。
• フレックスコンテナ: フレキシブルコンテナ。
• フレックスアイテム: 柔軟なアイテム。
• 主サイズ: 主軸に沿った長さ。
• 交差サイズ: 交差軸に沿った長さ。
図と定義を読めば、コンテナーとアイテムの属性を設定することで必要なレイアウトを実現できることがほぼ推測できます。この概念は、Android の重力とレイアウト重力に似ています。

もう 1 つの注目すべき点は、React Native の Flexbox モデルが CSS のモデルとは異なることです。まず、プロパティの名前が CSS の名前と異なります。第 2 に、サポートされるプロパティの数が少なくなります。第三に、比較的少数の属性値をサポートします。

コンテナのプロパティ

1.flexDirection

enum('row','column')

flexDirection は、主軸の方向を決定します。値が行の場合、主軸は水平軸、値は列、主軸は垂直軸になります。

2.flexWrap

enum('wrap','nowrap')

この属性は、アイテムをメインに配置できない場合に実行する必要があるアクションを定義します軸。 「wrap」は行の折り返しを意味し、「nowrap」は切り捨てを意味します。

3.justifyContent

enum('flex-start','flex-end','center','space-between','space-around')

主軸上の項目の配置を定義します。可能な値は 5 つあります。

flex-start (デフォルト値): left-aligned

• flex-end: right- aligned
• center: 中央揃え
• space-between: 項目間の均等な間隔で両端を揃えます。
• space-around: 各アイテムの両側の間隔が等しい (主軸が水平の場合、各アイテムのlayout_marginLeftとlayout_marginRightが同じであることがわかります。したがって、アイテム間の間隔は項目間の間隔より大きく、境界間隔は 2 倍です)。
効果は次のとおりです。

jusifyContent 効果

alignItems

enum('flex-start','flex-end', 'center' ,'stretch') は、交差軸 (Cross Axis) 上の項目の配置を定義します。

flex-start (デフォルト値): 交差軸の開始点を揃えます。

• flex-end: 交差軸の終点位置合わせ。
• center: 交差軸の中点を揃えます。
• ストレッチ: 高さが設定されていない場合、コンテナの高さ全体が占有されます。
効果は次のとおりです。

alignItem 効果

アイテムのプロパティ

1.flex

数値

ここでの flex 属性は、CSS の flex-grow に似ており、残りのスペースの割合を定義します。これは何を意味するのでしょうか。以下のコードを見てください:

View のレイアウトは次のとおりです:

const styles = StyleSheet.create({  container: {    //flex 容器属性    flexDirection: 'row',  //只支持column和row两种属性    flexWrap:'nowrap',  //只支持wrap和nowrap两种属性    justifyContent:'center',  //主轴    alignItems:'stretch',  //交叉轴    flex:1, //充满整个屏幕    backgroundColor:'#120056',  },  normalItem:{    height:75,    width:30,    color:'#ffffff',    backgroundColor:'#234567',    margin:10,  },  item:{    height:75,    flex:1,    color:'#ffffff',    backgroundColor:'#234567',    margin:10,  },  special:{    height:75,    width:30,    flex:2,    width:200,    color:'#ffffff',    backgroundColor:'#234567',    margin:10,  },});

ここではまず、normalItem の長さを 30 として定義します。固定幅です。同時に、item の flex 値を 1、special の flex 値を 2 として定義しました。これは、flex の幅が

  <View style={styles.container}>    <Text style={styles.normalItem}>      1    </Text>    <Text style={styles.normalItem}>      2    </Text>    <Text style={styles.special}>      3    </Text>    <Text style={styles.item}>      4    </Text>  </View>

同様に、special.width

flex.width = (container.width - normalItem.width \* 2) * 1/(2+1)

効果の図は次のとおりです。

special.width= (container.width - normalItem.width \* 2) * 2/(2+1)。

flex 効果

2.alignSelf

enum('auto','flex-start', 'flex-end ','center','stretch')

alignSelf はコンテナ内のアイテム自体の配置を定義します。詳細については、コンテナ内の alignItem 属性を参照してください。以下は、記述されたコードと表示される効果です:

効果は次のとおりです:

  item1:{    height:75,    width:30,    flex:1,    color:'#ffffff',    backgroundColor:'#234567',    margin:10,    alignSelf:'flex-start'  },  item2:{    height:75,    flex:1,    color:'#ffffff',    backgroundColor:'#234567',    margin:10,    alignSelf:'center'  },  item3:{    height:75,    flex:1,    width:200,    color:'#ffffff',    alignSelf:'flex-end',    backgroundColor:'#234567',    margin:10,  },  item4:{    flex:1,    width:200,    color:'#ffffff',    alignSelf:'stretch',    backgroundColor:'#234567',    margin:10,  },

alignSelf 効果

ここまででReact Nativeのフレキシブルボックスモデルの説明が終わりました、お読みいただきありがとうございました。

リファレンス

Flex レイアウト チュートリアル

Flexbox の完全ガイド

フレックスボックスガイド