reactnative:style
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
reactnative:style [2019/02/10 15:43] 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(デフォルト)：そのまま画面の外に伸びていく。 | ||
| - | wrap：回り込ませる。 | ||
| <code javascript> | <code javascript> | ||
| <View style={{flex:1, flexDirection:'row' , flexWrap:'nowrap' , backgroundColor: 'red'}}> // flexWrap:'nowrap' | <View style={{flex:1, flexDirection:'row' , flexWrap:'nowrap' , backgroundColor: 'red'}}> // flexWrap:'nowrap' | ||
| ライン 109: | ライン 147: | ||
| + | wrap：回り込ませる。 | ||
| <code javascript> | <code javascript> | ||
| <View style={{flex:1, flexDirection:'row' , flexWrap:'wrap' , backgroundColor: 'red'}}> // flexWrap:'wrap' | <View style={{flex:1, flexDirection:'row' , flexWrap:'wrap' , backgroundColor: 'red'}}> // flexWrap:'wrap' | ||
| ライン 126: | ライン 165: | ||
| - | ===== justifyContent ===== | + | ===== justifyContentサンプル ===== |
| 親に設定し、子の配置方法を設定する。flexDirectionに対する位置。 | 親に設定し、子の配置方法を設定する。flexDirectionに対する位置。 | ||
| flex-start(デフォルト）：子を先頭から配置。 | flex-start(デフォルト）：子を先頭から配置。 | ||
| ライン 215: | ライン 254: | ||
| {{:reactnative:pasted:20190210-153525.png}} | {{:reactnative:pasted:20190210-153525.png}} | ||
| - | ===== alignItems ===== | + | ===== alignItemsサンプル ===== |
| 親に設定し、子の横の広がり、もしくは位置を設定する。 | 親に設定し、子の横の広がり、もしくは位置を設定する。 | ||
| ライン 293: | ライン 332: | ||
| <View style={{flex:1, alignItems :'center', backgroundColor: 'red'}}> //alignItems :'center' | <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> | <Text>1.powderblue</Text> | ||
| </View> | </View> | ||
| - | <View style={{height: 50, backgroundColor: 'skyblue'}} > | + | <View style={{alignSelf:'center',height: 50, backgroundColor: 'skyblue'}} > |
| <Text>2.skyblue</Text> | <Text>2.skyblue</Text> | ||
| </View> | </View> | ||
| - | <View style={{height: 50, backgroundColor: 'steelblue'}} > | + | <View style={{alignSelf:'flex-end',height: 50, backgroundColor: 'steelblue'}} > |
| <Text>3.steelblue</Text> | <Text>3.steelblue</Text> | ||
| </View> | </View> | ||
| ライン 368: | ライン 407: | ||
| {{:reactnative:pasted:20190130-071510.png}} | {{:reactnative:pasted:20190130-071510.png}} | ||
| - | ===== flex ===== | ||
reactnative/style.1549781026.txt.gz · 最終更新: 2019/02/10 15:43 by ips
