猫型iPS細胞研究所

ユーザ用ツール

サイト用ツール

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

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン 		前のリビジョン
reactnative:style [2019/01/30 07:16]
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/​shohey1226/​items/​5185fcba7381bf4da2f2|React Nativeのデザイン - Stylesheet/​Flexbox (part1)]]
 +
 +[[https://​qiita.com/​shohey1226/​items/​f413c65b7f110dcb955c|React Nativeのデザイン - Stylesheet/​Flexbox (part2)]]
 +
 +[[https://​qiita.com/​nitaking/​items/​52ca6c23ba7c6c171d0e|【React Native】よく使うスタイル実装まとめ【StyleSheet】]]
 +
 +[[https://​casesandberg.github.io/​react-color/​|React Color]]
 +
 +====== widthやhight ======
 +数字でも%でも指定できる。%の場合は''​が必要。
 +<​code>​
 +style={{flex:​1,​width:'​100%',​maxHeight:​200,​top:​50}}
 +</​code>​
 +
 +===== flex =====
 +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>​
 +        <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}}
 +
 +
 +===== そのたサンプル =====
 +
  
 <​code>​ <​code>​
ライン 58: ライン 407:
 {{:​reactnative:​pasted:​20190130-071510.png}} {{:​reactnative:​pasted:​20190130-071510.png}}
  
-===== flex ===== 
  
  
reactnative/style.1548800166.txt.gz · 最終更新: 2019/01/30 07:16 by ips

ページ用ツール

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki