RN レイアウト#
背景#
今年以来、新しいディレクターが ReactNative を積極的に推進しており、フロントエンドの拡大を目指しています。H5 では React を使用し、クライアントサイドでは ReactNative を使用するため、ウェブページのレイアウトを再度「復習」する必要があります。そして、内容を自分のブログに記録し、宝儿姐の言葉で言えば、「機知に富んでいる」ことになります。
内容#
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 // クロス軸を伸ばし、具体的なwidth/heightが設定されていない場合にのみ効果があります
 flexDirection: 'column' |  flexDirection: 'column-reverse' |  flexDirection: 'row' |  flexDirection: 'row' |