猫型iPS細胞研究所

ユーザ用ツール

サイト用ツール

現在位置: INDEX » reactnative » style
トレース:
reactnative:style

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン 		前のリビジョン
reactnative:style [2019/02/10 15:08]
ips 		reactnative:style [2019/03/30 14:35] (現在)
ips
ライン 1: ライン 1:
 ====== style ====== ====== style ======
 +
 +[[https://​facebook.github.io/​react-native/​docs/​flexbox#​docsNav|EDIT
 +Layout with Flexbox]]
  
 [[https://​qiita.com/​courage-liberty/​items/​a3999560738e0cd64490|ReactNativeで簡単なfetchからFlatList→onPressまでのサンプルプログラム（CRNA）]] [[https://​qiita.com/​courage-liberty/​items/​a3999560738e0cd64490|ReactNativeで簡単なfetchからFlatList→onPressまでのサンプルプログラム（CRNA）]]
ライン 10: ライン 13:
  
 [[https://​casesandberg.github.io/​react-color/​|React Color]] [[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を親に追加すると、親は全体に広がります flex:​1を親に追加すると、親は全体に広がります
-子にもつけると、つけた数字の割合で親の中で広がります。+子にもつけると、つけた数字の割合で親の中で広がります
  
 ===== flexDirection ===== ===== flexDirection =====
ライン 19: ライン 28:
 column（デフォルト)：縦並び。 column（デフォルト)：縦並び。
 row：横並び。 row：横並び。
 +
  
 ===== flexWrap ===== ===== flexWrap =====
ライン 24: ライン 34:
 nowrap(デフォルト)：そのまま画面の外に伸びていく。 nowrap(デフォルト)：そのまま画面の外に伸びていく。
 wrap：回り込ませる。 wrap：回り込ませる。
 +
  
 ===== justifyContent ===== ===== justifyContent =====
ライン 32: ライン 43:
 space-between：子を先頭と最後に配置し、均等なスペースを他の子コンポーネントの間に挟む。 space-between：子を先頭と最後に配置し、均等なスペースを他の子コンポーネントの間に挟む。
 space-around：各子コンポーネントの均等なスペースを先頭の前、最後の後に加えた配置。 space-around：各子コンポーネントの均等なスペースを先頭の前、最後の後に加えた配置。
 +
  
 ===== alignItems ===== ===== alignItems =====
ライン 38: ライン 50:
 flex-start：子を先頭から配置。 flex-start：子を先頭から配置。
 flex-end：子を後ろに配置します。 flex-end：子を後ろに配置します。
 +center：子を真ん中に配置します
 +alignSelf：親の設定を子側で上書きする。alignItemsと同じ値が設定できる。
 +
 +
 +===== flexサンプル =====
 +flex:​1を親に追加すると、親は全体に広がります
 +
 +
 +<code javascript>​
 +        <View style={{flex:​1,​ backgroundColor:​ '​red'​}}>​ //flex:1
 +          <View style={{height:​ 50, backgroundColor:​ '​powderblue'​}} >
 +            <​Text>​1.powderblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​skyblue'​}} >
 +            <​Text>​2.skyblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​steelblue'​}} >
 +            <​Text>​3.steelblue</​Text>​
 +          </​View>​
 +        </​View>​
 +</​code>​
 +{{:​reactnative:​pasted:​20190210-152110.png}}
 +
 +子にもつけると、つけた数字の割合で親の中で広がります。
 +<code javascript>​
 +        <View style={{flex:​1,​ backgroundColor:​ '​red'​}}>​
 +
 +          <View style={{flex:​1,​height:​ 50, backgroundColor:​ '​powderblue'​}} > //flex:1
 +            <​Text>​1.powderblue</​Text>​
 +          </​View>​
 +          <View style={{flex:​2,​height:​ 50, backgroundColor:​ '​skyblue'​}} > //flex:2
 +            <​Text>​2.skyblue</​Text>​
 +          </​View>​
 +          <View style={{flex:​3,​height:​ 50, backgroundColor:​ '​steelblue'​}} > //flex:3
 +            <​Text>​3.steelblue</​Text>​
 +          </​View>​
 +        </​View>​
 +</​code>​
 +{{:​reactnative:​pasted:​20190210-152214.png}}
 +
 +
 +===== flexDirectionサンプル =====
 +親に設定し、子の並ぶ方向を決める。
 +column（デフォルト)：縦並び。
 +<code javascript>​
 +        <View style={{flex:​1,​ flexDirection:'​column'​ , backgroundColor:​ '​red'​}}>​ // flexDirection:'​column' ​
 +
 +          <View style={{height:​ 50, backgroundColor:​ '​powderblue'​}} >
 +            <​Text>​1.powderblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​skyblue'​}} >
 +            <​Text>​2.skyblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​steelblue'​}} >
 +            <​Text>​3.steelblue</​Text>​
 +          </​View>​
 +        </​View>​
 +</​code>​
 +{{:​reactnative:​pasted:​20190210-152601.png}}
 +
 +row：横並び。
 +<code javascript>​
 +        <View style={{flex:​1,​ flexDirection:'​row'​ , backgroundColor:​ '​red'​}}>​ // flexDirection:'​row'​
 +
 +          <View style={{height:​ 50, backgroundColor:​ '​powderblue'​}} >
 +            <​Text>​1.powderblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​skyblue'​}} >
 +            <​Text>​2.skyblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​steelblue'​}} >
 +            <​Text>​3.steelblue</​Text>​
 +          </​View>​
 +        </​View>​
 +</​code>​
 +{{:​reactnative:​pasted:​20190210-152423.png}}
 +
 +===== flexWrapサンプル =====
 +親に設定し、子が画面に入りきらなかった場合の回り込みの設定をする。
 +nowrap(デフォルト)：そのまま画面の外に伸びていく。
 +<code javascript>​
 +        <View style={{flex:​1,​ flexDirection:'​row'​ , flexWrap:'​nowrap'​ , backgroundColor:​ '​red'​}}>​　//​ flexWrap:'​nowrap'​
 +
 +          <View style={{height:​ 50, width:180, backgroundColor:​ '​powderblue'​}} >
 +            <​Text>​1.powderblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, width:180, backgroundColor:​ '​skyblue'​}} >
 +            <​Text>​2.skyblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, width:180, backgroundColor:​ '​steelblue'​}} >
 +            <​Text>​3.steelblue</​Text>​
 +          </​View>​
 +        </​View>​
 +</​code>​
 +{{:​reactnative:​pasted:​20190210-153024.png}}
 +
 +
 +wrap：回り込ませる。
 +<code javascript>​
 +        <View style={{flex:​1,​ flexDirection:'​row'​ , flexWrap:'​wrap'​ , backgroundColor:​ '​red'​}}>​　//​ flexWrap:'​wrap'​
 +
 +          <View style={{height:​ 50, width:180, backgroundColor:​ '​powderblue'​}} >
 +            <​Text>​1.powderblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, width:180, backgroundColor:​ '​skyblue'​}} >
 +            <​Text>​2.skyblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, width:180, backgroundColor:​ '​steelblue'​}} >
 +            <​Text>​3.steelblue</​Text>​
 +          </​View>​
 +        </​View>​
 +</​code>​
 +{{:​reactnative:​pasted:​20190210-153108.png}}
 +
 +
 +===== justifyContentサンプル =====
 +親に設定し、子の配置方法を設定する。flexDirectionに対する位置。
 +flex-start(デフォルト）：子を先頭から配置。
 +<code javascript>​
 +        <View style={{flex:​1,​ justifyContent:'​flex-start',​ backgroundColor:​ '​red'​}}>​　//​justifyContent:'​flex-start'​
 +
 +          <View style={{height:​ 50, backgroundColor:​ '​powderblue'​}} >
 +            <​Text>​1.powderblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​skyblue'​}} >
 +            <​Text>​2.skyblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​steelblue'​}} >
 +            <​Text>​3.steelblue</​Text>​
 +          </​View>​
 +        </​View>​
 +</​code>​
 +{{:​reactnative:​pasted:​20190210-153229.png}}
 +
 +
 +flex-end：子を後ろから配置。
 +<code javascript>​
 +        <View style={{flex:​1,​ justifyContent:'​flex-end',​ backgroundColor:​ '​red'​}}>​　//​justifyContent:'​flex-end'​
 +
 +          <View style={{height:​ 50, backgroundColor:​ '​powderblue'​}} >
 +            <​Text>​1.powderblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​skyblue'​}} >
 +            <​Text>​2.skyblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​steelblue'​}} >
 +            <​Text>​3.steelblue</​Text>​
 +          </​View>​
 +        </​View>​
 +</​code>​
 +{{:​reactnative:​pasted:​20190210-153313.png}}
 +
 +center：子を真ん中に配置。
 +<code javascript>​
 +        <View style={{flex:​1,​ justifyContent:'​center',​ backgroundColor:​ '​red'​}}>​　//​justifyContent:'​center'​
 +
 +          <View style={{height:​ 50, backgroundColor:​ '​powderblue'​}} >
 +            <​Text>​1.powderblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​skyblue'​}} >
 +            <​Text>​2.skyblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​steelblue'​}} >
 +            <​Text>​3.steelblue</​Text>​
 +          </​View>​
 +        </​View>​
 +</​code>​
 +{{:​reactnative:​pasted:​20190210-153356.png}}
 +
 +space-between：子を先頭と最後に配置し、均等なスペースを他の子コンポーネントの間に挟む。
 +<code javascript>​
 +        <View style={{flex:​1,​ justifyContent:'​space-between',​ backgroundColor:​ '​red'​}}>​　//​justifyContent:'​space-between'​
 +
 +          <View style={{height:​ 50, backgroundColor:​ '​powderblue'​}} >
 +            <​Text>​1.powderblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​skyblue'​}} >
 +            <​Text>​2.skyblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​steelblue'​}} >
 +            <​Text>​3.steelblue</​Text>​
 +          </​View>​
 +        </​View>​
 +</​code>​
 +{{:​reactnative:​pasted:​20190210-153501.png}}
 +
 +
 +space-around：各子コンポーネントの均等なスペースを先頭の前、最後の後に加えた配置。
 +<code javascript>​
 +        <View style={{flex:​1,​ justifyContent:'​space-between：',​ backgroundColor:​ '​red'​}}>​　//​justifyContent:'​space-around'​
 +
 +          <View style={{height:​ 50, backgroundColor:​ '​powderblue'​}} >
 +            <​Text>​1.powderblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​skyblue'​}} >
 +            <​Text>​2.skyblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​steelblue'​}} >
 +            <​Text>​3.steelblue</​Text>​
 +          </​View>​
 +        </​View>​
 +</​code>​
 +{{:​reactnative:​pasted:​20190210-153525.png}}
 +
 +===== alignItemsサンプル =====
 +親に設定し、子の横の広がり、もしくは位置を設定する。
 +
 +stretch（デフォルト）：伸ばして配置。
 +<code javascript>​
 +        <View style={{flex:​1,​ alignItems :'​stretch',​ backgroundColor:​ '​red'​}}>​　//​alignItems :'​stretch'​
 +
 +          <View style={{height:​ 50, backgroundColor:​ '​powderblue'​}} >
 +            <​Text>​1.powderblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​skyblue'​}} >
 +            <​Text>​2.skyblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​steelblue'​}} >
 +            <​Text>​3.steelblue</​Text>​
 +          </​View>​
 +        </​View>​
 +</​code>​
 +{{:​reactnative:​pasted:​20190210-153838.png}}
 +
 +
 +
 +flex-start：子を先頭から配置。
 +<code javascript>​
 +        <View style={{flex:​1,​ alignItems :'​flex-start',​ backgroundColor:​ '​red'​}}>​　//​alignItems :'​flex-start'​
 +
 +          <View style={{height:​ 50, backgroundColor:​ '​powderblue'​}} >
 +            <​Text>​1.powderblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​skyblue'​}} >
 +            <​Text>​2.skyblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​steelblue'​}} >
 +            <​Text>​3.steelblue</​Text>​
 +          </​View>​
 +        </​View>​
 +</​code>​
 +{{:​reactnative:​pasted:​20190210-153930.png}}
 +
 +flex-end：子を後ろに配置します。
 +<code javascript>​
 +        <View style={{flex:​1,​ alignItems :'​flex-end',​ backgroundColor:​ '​red'​}}>​　//​alignItems :'​flex-end'​
 +
 +          <View style={{height:​ 50, backgroundColor:​ '​powderblue'​}} >
 +            <​Text>​1.powderblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​skyblue'​}} >
 +            <​Text>​2.skyblue</​Text>​
 +          </​View>​
 +          <View style={{height:​ 50, backgroundColor:​ '​steelblue'​}} >
 +            <​Text>​3.steelblue</​Text>​
 +          </​View>​
 +        </​View>​
 +</​code>​
 +
 +{{:​reactnative:​pasted:​20190210-154015.png}}
 +
 center：子を真ん中に配置します。 center：子を真ん中に配置します。
-alignSelfalignSelf：親の設定を子側で上書きする。alignItemsと同じ値が設定できる。+<code javascript>​ 
 +        <View style={{flex:​1, ​alignItems ​:'​center',​ backgroundColor:​ '​red'​}}>​　//​alignItems :'​center'​
  
-===== サンプル =====+          <View style={{height: 50, backgroundColor:​ '​powderblue'​}} > 
 +            <​Text>​1.powderblue</​Text>​ 
 +          </​View>​ 
 +          <View style={{height: 50, backgroundColor:​ '​skyblue'​}} > 
 +            <​Text>​2.skyblue</​Text>​ 
 +          </​View>​ 
 +          <View style={{height: 50, backgroundColor:​ '​steelblue'​}} > 
 +            <​Text>​3.steelblue</​Text>​ 
 +          </​View>​ 
 +        </​View>​ 
 +</​code>​ 
 +{{:​reactnative:​pasted:​20190210-154129.png}} 
 + 
 +alignSelf：親の設定を子側で上書きする。alignItemsと同じ値が設定できる。 
 +<code javascript>​ 
 +        <View style={{flex:1, alignItems :'​center',​ backgroundColor:​ '​red'​}}>​　//​alignItems :'​center'​ 
 + 
 +          <View style={{alignSelf:'​flex-start',​height:​ 50, backgroundColor:​ '​powderblue'​}} > 
 +            <​Text>​1.powderblue</​Text>​ 
 +          </​View>​ 
 +          <View style={{alignSelf:'​center',​height:​ 50, backgroundColor:​ '​skyblue'​}} > 
 +            <​Text>​2.skyblue</​Text>​ 
 +          </​View>​ 
 +          <View style={{alignSelf:'​flex-end',​height:​ 50, backgroundColor:​ '​steelblue'​}} > 
 +            <​Text>​3.steelblue</​Text>​ 
 +          </​View>​ 
 +        </​View>​ 
 +</​code>​ 
 + 
 +{{:​reactnative:​pasted:​20190210-154341.png}} 
 + 
 + 
 +===== そのたサンプル =====
  
  
ライン 101: ライン 407:
 {{:​reactnative:​pasted:​20190130-071510.png}} {{:​reactnative:​pasted:​20190130-071510.png}}
  
-===== flex ===== 
  
  
reactnative/style.1549778883.txt.gz · 最終更新: 2019/02/10 15:08 by ips

ページ用ツール

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki