RN レイアウト#
背景#
今年以来、会社の新しいディレクターが ReactNative を積極的に推進しており、フロントエンドを拡大することを目標としています。H5 では React を使用し、クライアント側では ReactNative を使用するため、ウェブページのレイアウトを再度「復習」する必要があります。そして、その内容を自分のブログに記録しておきます。宝儿姐の言葉を借りれば、「機智な一 bi」です。
内容#
Flex レイアウト：Flex は Flexible Box の略です。Flex レイアウトに設定すると、子要素の float、clear、verti-align 属性は無効になります。
コンテナのプロパティ：
コンテナによく設定されるプロパティは次のとおりです：
flexDirection // メイン軸の配置方向
flexWrap // メイン軸に収まらない場合の改行方法
justifyContent // メイン軸上でのアイテムの配置方法
alignItems // クロス軸上でのアイテムの配置方法
alignContent // 複数のクロス軸の配置方法。1本の軸線しかない場合、このプロパティは効果がありません
alignSelf // 個々のアイテムに他のアイテムと異なる配置方法を許可し、alignItemsプロパティを上書きします
各プロパティの設定可能な値は次のとおりです:
flexDirection: 'column' | 'column-reverse' | 'row' | 'row-reverse'
flexWrap: 'nowrap' | 'wrap' | 'wrap-reverse'
justifyContent: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly'
alignItems: 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'
alignContent: 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch'
alignSelf: 'auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'
各プロパティの値の意味は次のとおりです：
- flexDirection: メイン軸の配置方向
column // デフォルトの配置方法で、上から下に配置されます
column-reverse // 下から上に配置されます
row // 左から右に配置されます
row-reverse // 右から左に配置されます
- flexWrap: メイン軸に収まらない場合の改行方法
nowrap // デフォルトで、改行せずにオーバーフローする可能性があります
wrap // 改行し、最初の行は上にあります
wrap-reverse // 改行し、最初の行は下にあります
- justifyContent: メイン軸上でのアイテムの配置方法
center // 中央に配置されます
flex-start // デフォルトで左揃えです
flex-end // 右揃えです
space-around // 各アイテムの両側の間隔が等しくなります。したがって、アイテム間の間隔はアイテムと境界の間隔の2倍になります
space-between // 両端揃えで、アイテム間の間隔は均等で、n-1個の間隔があります
space-evenly // 両端とアイテム間の間隔が均等で、n+1個の間隔があります
- alignItems: クロス軸上でのアイテムの配置方法
baseline // アイテムの最初の行のテキストのベースラインに揃えます
center // クロス軸の中央に揃えます
flex-end // クロス軸の終点に揃えます
flex-start // クロス軸の始点に揃えます
stretch // デフォルトで、アイテムが高さを設定していないか、autoを設定している場合、コンテナの高さを埋めます
- alignContent: 複数のクロス軸の配置方法。アイテムが 1 本の軸線しかない場合、このプロパティは効果がありません。
center // クロス軸の中央に揃えます
flex-end // クロス軸の終点に揃えます
flex-start // クロス軸の始点に揃えます
space-around // 各軸線の両側の間隔が等しくなります。したがって、軸線間の間隔は軸線と境界の間隔の2倍になります
space-between // 両端揃えで、軸線間の間隔は均等に分布します
stretch // デフォルトで、軸線がクロス軸全体を埋めます
- alignSelf: 個々のアイテムに他のアイテムと異なる配置方法を許可し、alignItems プロパティを上書きします。
auto // 自身の設定された幅と高さに従って表示されます。設定されていない場合、stretchと同じ効果があります
baseline // アイテムの最初の行のテキストのベースラインに揃えます
center // 中央に配置されます
flex-end // 親コンテナの下端に揃えます
flex-start // 親コンテナの上端に揃えます
stretch // クロス軸を伸ばし、具体的な幅/高さが設定されていない場合にのみ効果があります
 flexDirection: 'column' |  flexDirection: 'column-reverse' |  flexDirection: 'row' |  flexDirection: 'row' |