widthとheightでサイズを決める
具体的なスタイルの解説に移っていきましょう。まずは、コンポーネントが自身の大きさを明示するためのプロパティであるwidthとheightについて解説します。コンポーネントの幅を指定するのがwidthで、高さを決めるのがheightです。
React Nativeのスタイルでは、リスト1のように指定します。
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export const WidthHeight = () => (
<View style={styles.container}>
<Text>200 x 100</Text>
</View>
);
const styles = StyleSheet.create({
container: {
// (1) 幅200, 高さ100のコンポーネントにする
width: 200,
height: 100,
// 見やすいように枠線をつける
borderWidth: StyleSheet.hairlineWidth,
borderColor: '#bbb'
}
});
（1）で指定したwidthとheightが幅と高さの指定です。前回も解説したとおり、React Nativeではほとんどの場合、長さの指定に単位をつけません。リスト1のコンポーネントを表示すると、図3の見た目になります。
図3はiPhoneで表示しているので、widthとheightコンポーネントの大きさは、幅が200pt、高さが100ptになりました。
widthとheightに指定できる値
数値以外にもwidthやheightに指定できるものがあります。公式ドキュメントによれば、CSSドキュメントのwidthやheightに準拠しており、emなどの単位はサポートしていない、とのことです。ドキュメントをうのみにする分にはautoなどの指定もできそうですが、筆者が実際に動作を確認した範囲で完動するのは次の2パターンでした。
-
数値を明示する（例：
height: 200） -
%で割合を表記する（例：width: '75%'）
この2つがあれば基本的には困らないので、使い分けていきましょう。
最小・最大の幅と高さを指定する
CSSと同様に、幅と高さの最大値・最小値を指定するためのプロパティも用意されています。伸縮はさせたいが限度は設けたい、という場合に役立ちます。
- minWidth：幅の最小値を指定する
- maxWidth：幅の最大値を指定する
- minHeight：高さの最小値を指定する
- maxHeight：高さの最小値を指定する
指定できる値は、前項のwidthやheightと同様です。
marginとpaddingで間を空ける
隙間を空けるためのスタイルとして、marginとpaddingがサポートされています。最も単純な使い方としては、リスト2の形です。
// 略
export const MarginPadding = () => (
<View style={styles.container}>
<Text>コンテンツ</Text>
</View>
);
const styles = StyleSheet.create({
container: {
margin: 72,
padding: 16,
// 略
}
});
見た目は以下のようになります（図4）。
境界線はつけてありますが、少し分かりづらいので、色づけしてみましょう（図5）。
CSSと同様に、境界の内側を広げるのがpadding、外側と距離を取るのがmarginです。CSSと共通しているものとして、次のプロパティが用意されています。
-
marginの指定
- margin：すべての方向のmarginを指定する
- marginTop：上方向のmarginを指定する
- marginBottom：下方向のmarginを指定する
- marginLeft：左方向のmarginを指定する
- marginRight：右方向のmarginを指定する
-
paddingの指定
- padding：すべての方向のmarginを指定する
- paddingTop：上方向のmarginを指定する
- paddingBottom：下方向のmarginを指定する
- paddingLeft：左方向のmarginを指定する
- paddingRight：右方向のmarginを指定する
React Nativeで独自に、次のプロパティが用意されています。
-
marginの指定
- marginStart：左方向（RTL環境では右方向）のmarginを指定する
- marginEnd：右方向（RTL環境では左方向）のmarginを指定する
- marginVertical：上下方向のmarginを指定する
- marginHorizontal：左右方向のmarginを指定する
-
paddingの指定
- paddingStart：左方向（RTL環境では右方向）のmarginを指定する
- paddingEnd：右方向（RTL環境では左方向）のmarginを指定する
- paddingVertical：上下方向のmarginを指定する
- paddingHorizontal：左右方向のmarginを指定する
RTL対応のStartとEndについては前回も触れたとおりで、端末側の言語設定によって右と左が入れ替わります。marginとpaddingのために独自に用意されたものとしてmarginVerticalなどの、縦方向や横方向の指定を一度にできるプロパティがあります。
marginとpaddingに指定できる値
marginやpaddingに指定できる値は、おおむねwidthとheightに準拠しています。ただ、'auto'が指定できる点は、CSSに慣れ親しんだ方にはうれしいかもしれません。
-
数値を明示する（例：
padding: 16） -
%で割合を表記する（例：marginHorizontal: '10%'） -
'auto'（例：marginLeft: 'auto'）
CSSとの違いとして、CSSではpadding: 5% 10%;といった形で指定できた「ショートハンド（省略）記法」が存在しません。React Nativeでmarginやpaddingを指定する際には、リスト3のように、個別に記述する必要があります。
// CSS padding: 5% 10%; // React Native paddingVertical: '5%', paddingHorizontal: '10%',
VerticalとHorizontalの指定があるおかげで、実用上はそこまで気になりませんが、CSS経験者の方は少し煩わしく感じるかもしれません。筆者は、ショートハンドの記述順がなかなか覚えられずに毎回ドキュメントを引き直してしまうので、ショートハンドが現れないことは好ましいと思っています。
