reactnative:style
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
reactnative:style [2019/02/10 15:47] ips |
reactnative:style [2019/03/30 14:35] (現在) ips |
||
|---|---|---|---|
| ライン 14: | ライン 14: | ||
| [[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 ===== | ||
| ライン 19: | ライン 24: | ||
| 子にもつけると、つけた数字の割合で親の中で広がります | 子にもつけると、つけた数字の割合で親の中で広がります | ||
| - | ===== flexDirectionサンプル ===== | + | ===== flexDirection ===== |
| 親に設定し、子の並ぶ方向を決める。 | 親に設定し、子の並ぶ方向を決める。 | ||
| column（デフォルト)：縦並び。 | column（デフォルト)：縦並び。 | ||
| ライン 327: | ライン 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> | ||
| ライン 402: | ライン 407: | ||
| {{:reactnative:pasted:20190130-071510.png}} | {{:reactnative:pasted:20190130-071510.png}} | ||
| - | ===== flex ===== | ||
reactnative/style.1549781237.txt.gz · 最終更新: 2019/02/10 15:47 by ips
