reactnative:style

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

--- reactnative:style [2019/02/10 15:46]
ips
+++ reactnative:style [2019/03/30 14:35] (現在)
ips
@@ ライン 14: / ライン 14: @@
 [[https://casesandberg.github.io/react-color/|React Color]]
+====== widthやhight ======
+数字でも%でも指定できる。%の場合は''が必要。
+<code>
+style={{flex:1,width:'100%',maxHeight:200,top:50}}
+</code>
-===== flexサンプル =====
+===== flex =====
 flex:1を親に追加すると、親は全体に広がります
 子にもつけると、つけた数字の割合で親の中で広がります
-===== flexDirectionサンプル =====
+===== flexDirection =====
 親に設定し、子の並ぶ方向を決める。
 column（デフォルト)：縦並び。
@@ ライン 25: / ライン 30: @@
-===== flexWrapサンプル =====
+===== flexWrap =====
 親に設定し、子が画面に入りきらなかった場合の回り込みの設定をする。
 nowrap(デフォルト)：そのまま画面の外に伸びていく。
@@ ライン 31: / ライン 36: @@
-===== justifyContentサンプル =====
+===== justifyContent =====
 親に設定し、子の配置方法を設定する。flexDirectionに対する位置。
 flex-start(デフォルト）：子を先頭から配置。
@@ ライン 40: / ライン 45: @@
-===== alignItemsサンプル =====
+===== alignItems =====
 親に設定し、子の横の広がり、もしくは位置を設定する。
 stretch（デフォルト）：伸ばして配置。
@@ ライン 327: / ライン 332: @@
         <View style={{flex:1, alignItems :'center', backgroundColor: 'red'}}>　//alignItems :'center'
-          <View style={{height: 50, backgroundColor: 'powderblue'}} >
+          <View style={{alignSelf:'flex-start',height: 50, backgroundColor: 'powderblue'}} >
             <Text>1.powderblue</Text>
           </View>
-          <View style={{height: 50, backgroundColor: 'skyblue'}} >
+          <View style={{alignSelf:'center',height: 50, backgroundColor: 'skyblue'}} >
             <Text>2.skyblue</Text>
           </View>
-          <View style={{height: 50, backgroundColor: 'steelblue'}} >
+          <View style={{alignSelf:'flex-end',height: 50, backgroundColor: 'steelblue'}} >
             <Text>3.steelblue</Text>
           </View>
@@ ライン 402: / ライン 407: @@
 {{:reactnative:pasted:20190130-071510.png}}
-===== flex =====

reactnative/style.1549781214.txt.gz · 最終更新: 2019/02/10 15:46 by ips