猫型iPS細胞研究所

ユーザ用ツール

サイト用ツール

現在位置: INDEX » reactnative » style
トレース: • OAuth2.0 • Gem • Google Maps Platform • DockerでNeo4j • Microsoft Whiteboard • OAuth 2.0 Playground
reactnative:style

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン 		前のリビジョン
reactnative:style [2019/02/10 15:26]
ips 		reactnative:style [2019/03/30 14:35] (現在)
ips
ライン 13: ライン 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 ===== 
 +親に設定し、子の並ぶ方向を決める。 
 +column（デフォルト)：縦並び。 
 +row：横並び。 
 + 
 + 
 +===== flexWrap ===== 
 +親に設定し、子が画面に入りきらなかった場合の回り込みの設定をする。 
 +nowrap(デフォルト)：そのまま画面の外に伸びていく。 
 +wrap：回り込ませる。 
 + 
 + 
 +===== justifyContent ===== 
 +親に設定し、子の配置方法を設定する。flexDirectionに対する位置。 
 +flex-start(デフォルト）：子を先頭から配置。 
 +flex-end：子を後ろから配置。 
 +center：子を真ん中に配置。 
 +space-between：子を先頭と最後に配置し、均等なスペースを他の子コンポーネントの間に挟む。 
 +space-around：各子コンポーネントの均等なスペースを先頭の前、最後の後に加えた配置。 
 + 
 + 
 +===== alignItems ===== 
 +親に設定し、子の横の広がり、もしくは位置を設定する。 
 +stretch（デフォルト）：伸ばして配置。 
 +flex-start：子を先頭から配置。 
 +flex-end：子を後ろに配置します。 
 +center：子を真ん中に配置します 
 +alignSelf：親の設定を子側で上書きする。alignItemsと同じ値が設定できる。 
 + 
 + 
 +===== flexサンプル ===== 
 +flex:​1を親に追加すると、親は全体に広がります 
  
 <code javascript>​ <code javascript>​
ライン 33: ライン 73:
 {{:​reactnative:​pasted:​20190210-152110.png}} {{:​reactnative:​pasted:​20190210-152110.png}}
  
 +子にもつけると、つけた数字の割合で親の中で広がります。
 <code javascript>​ <code javascript>​
         <View style={{flex:​1,​ backgroundColor:​ '​red'​}}>​         <View style={{flex:​1,​ backgroundColor:​ '​red'​}}>​
ライン 51: ライン 91:
  
  
-===== flexDirection =====+===== flexDirectionサンプル ​=====
 親に設定し、子の並ぶ方向を決める。 親に設定し、子の並ぶ方向を決める。
 column（デフォルト)：縦並び。 column（デフォルト)：縦並び。
-row：横並び。 
- 
 <code javascript>​ <code javascript>​
         <View style={{flex:​1,​ flexDirection:'​column'​ , backgroundColor:​ '​red'​}}>​ // flexDirection:'​column' ​         <View style={{flex:​1,​ flexDirection:'​column'​ , backgroundColor:​ '​red'​}}>​ // flexDirection:'​column' ​
ライン 72: ライン 110:
 {{:​reactnative:​pasted:​20190210-152601.png}} {{:​reactnative:​pasted:​20190210-152601.png}}
  
 +row：横並び。
 <code javascript>​ <code javascript>​
         <View style={{flex:​1,​ flexDirection:'​row'​ , backgroundColor:​ '​red'​}}>​ // flexDirection:'​row'​         <View style={{flex:​1,​ flexDirection:'​row'​ , backgroundColor:​ '​red'​}}>​ // flexDirection:'​row'​
ライン 88: ライン 127:
 {{:​reactnative:​pasted:​20190210-152423.png}} {{:​reactnative:​pasted:​20190210-152423.png}}
  
-===== flexWrap =====+===== flexWrapサンプル ​=====
 親に設定し、子が画面に入りきらなかった場合の回り込みの設定をする。 親に設定し、子が画面に入りきらなかった場合の回り込みの設定をする。
 nowrap(デフォルト)：そのまま画面の外に伸びていく。 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：回り込ませる。 wrap：回り込ませる。
 +<code javascript>​
 +        <View style={{flex:​1,​ flexDirection:'​row'​ , flexWrap:'​wrap'​ , backgroundColor:​ '​red'​}}>​　//​ flexWrap:'​wrap'​
  
-===== justifyContent =====+          <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に対する位置。 親に設定し、子の配置方法を設定する。flexDirectionに対する位置。
 flex-start(デフォルト）：子を先頭から配置。 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：子を後ろから配置。 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：子を真ん中に配置。 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：子を先頭と最後に配置し、均等なスペースを他の子コンポーネントの間に挟む。 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：各子コンポーネントの均等なスペースを先頭の前、最後の後に加えた配置。 space-around：各子コンポーネントの均等なスペースを先頭の前、最後の後に加えた配置。
 +<code javascript>​
 +        <View style={{flex:​1,​ justifyContent:'​space-between：',​ backgroundColor:​ '​red'​}}>​　//​justifyContent:'​space-around'​
  
-===== alignItems =====+          <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（デフォルト）：伸ばして配置。 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：子を先頭から配置。 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：子を後ろに配置します。 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}} 
  
-===== サンプル =====+===== そのたサンプル =====
  
  
ライン 169: ライン 407:
 {{:​reactnative:​pasted:​20190130-071510.png}} {{:​reactnative:​pasted:​20190130-071510.png}}
  
-===== flex ===== 
  
  
reactnative/style.1549779962.txt.gz · 最終更新: 2019/02/10 15:26 by ips

ページ用ツール

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki