[React Nativeレイアウト覚書] flexとwidth/heightの適用優先度を確認

1.普通のflex

<View style={{backgroundColor: 'red', width: 100, height: 100}}>
  <View style={{backgroundColor: 'blue', flex: 1}}/>
</View>

背景redである親要素の内側を背景blueの要素で満たす

2.width, heightを加える

<View style={{backgroundColor: 'red', width: 100, height: 100}}>
  <View style={{backgroundColor: 'blue', flex: 1, width: 50, height: 50}}/>
</View>

値を指定したwidthは効くが、heightは効かず、flexが有効となりストレッチする。これは親要素のflexDirection(デフォルトcolumn)が関係している。
=> 次で説明

3.flexDirectionを変更する

<View style={{backgroundColor: 'red', width: 100, height: 100, flexDirection: 'row'}}>
  <View style={{backgroundColor: 'blue', flex: 1, width: 50, height: 50}}/>
</View>

2とはwidthとheightの効きが逆転する。
これは子要素のflex=1が親要素のflexDirectionの向きに対してストレッチするため。