猫型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 14:00]
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をContainerに追加するとそのコンポーネントが全体に広がります +flex:1を親に追加すると、親は全体に広がります 
-子につけると、その割合でひろがる。+子にもつけると、つけた数字の割合で親の中で広がります
  
 ===== flexDirection ===== ===== flexDirection =====
-columnは縦並び（デフォルト)。 +親に設定し、子の並ぶ方向を決める。 
-rowで横並び。+column（デフォルト)：縦並び。 
 +row：横並び。 
  
 ===== flexWrap ===== ===== flexWrap =====
-Container側（親側）の要素です。コンポーネントが入りきらなかった場合の回り込みの設定になります。 +親に設定し、子が画面に入りきらなかった場合の回り込みの設定をする。 
-nowrap(デフォルト) +nowrap(デフォルト)：そのまま画面の外に伸びていく。 
-wrapは回り込ませる。+wrap：回り込ませる。 
  
 ===== justifyContent ===== ===== justifyContent =====
-親コンポーント内の子コンポーネントの配置を決めます。 +親に設定し、子の配置方法を設定する。flexDirectionに対する位置。 
-flex-start(デフォルト）。子コンポーネントを先頭から配置します。 +flex-start(デフォルト）：子を先頭から配置。 
-flex-end子コンポーネントを後ろから配置します。 +flex-end：子を後ろから配置。 
-center子コンポーネントを真ん中に配置します。 +center：子を真ん中に配置。 
-space-between子コンポーネントを先頭と最後に配置し、均等なスペースを他の子コンポーネントの間に挟みます。 +space-between：子を先頭と最後に配置し、均等なスペースを他の子コンポーネントの間に挟む。 
-space-around各子コンポーネントの均等なスペースを先頭の前、最後の後に加えた配置です。+space-around：各子コンポーネントの均等なスペースを先頭の前、最後の後に加えた配置。 
  
 ===== alignItems ===== ===== alignItems =====
-stretch（デフォルト）子コンポーネントを伸ばして配置します。 +親に設定し、子の横の広がり、もしくは位置を設定する。 
-flex-start子コンポーネントを先頭から配置します。 +stretch（デフォルト）：伸ばして配置。 
-flex-end子コンポーネントを後ろに配置します。 +flex-start：子を先頭から配置。 
-center子コンポーネントを真ん中に配置します。 +flex-end：子を後ろに配置します。 
-alignSelfalignSelfはalignItemsで配置したものを子コンポーネント側で上書きします。したがって、alignItemsと同じ値を設定します。+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：子を真ん中に配置します。 
 +<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}} 
 + 
 + 
 +===== そのたサンプル =====
  
  
ライン 99: ライン 407:
 {{:​reactnative:​pasted:​20190130-071510.png}} {{:​reactnative:​pasted:​20190130-071510.png}}
  
-===== flex ===== 
  
  
reactnative/style.1549774810.txt.gz · 最終更新: 2019/02/10 14:00 by ips

ページ用ツール

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki