レイアウトと装飾
さて、そろそろ個別のスタイルの解説に入りたいところですが、その前に、本記事におけるスタイルの区別について確認しておきましょう。これは筆者が独自に認識しているものなので、あまり一般的なものではありません。しかし、ここに認識の線を引いておいたほうが学習の助けになると信じて解説します。
React Nativeのスタイルは、そのほとんどが大きく分けて「レイアウト」と「装飾」のどちらかに分類されます（図3）。
レイアウトのためのスタイルは、コンポーネント同士の位置関係を調整し、画面内の適切な場所にコンポーネント配置するためのスタイルです。後述するFlexboxの各種記法や、margin、paddingといったものがこれにあたります。React Nativeにおける重要な特徴として、レイアウトのためのスタイルはほぼすべてのコンポーネントに指定できる点があります。
一方の装飾のためのスタイルは、コンポーネント自身を変形・着色するためのスタイルです。色を変えたり、枠線を付けたりします。こちらはレイアウトのためのスタイルとは毛色が違っており、Textコンポーネントだけに使えるスタイルがあるため、注意が必要です。
本記事で「レイアウト」や「装飾」といった言葉が出てきた際には、これらの特徴を意識しながら読んでください。
Viewを装飾する主なプロパティ
それではまず、Viewコンポーネントを装飾するためのスタイルを見てみましょう。公式ドキュメントから抜粋します。
数は多めですが、ほとんどは枠線を管理するためのものです。CSSには存在しないStartやEndといった記述もありますが、これについては後述します。
-
枠線の太さに関するもの
- borderWidth：すべての辺の太さを指定する
- borderTopWidth：上辺の太さを指定する
-
borderBottomWidth：下辺の太さを指定する
-
borderLeftWidth：左辺の太さを指定する
-
borderRightWidth：右辺の太さを指定する
-
borderStartWidth：左辺（RTL環境では右辺）の太さを指定する
-
borderEndWidth：右辺（RTL環境では左辺）の太さを指定する
-
枠線の角の丸みに関するもの
-
borderRadius：すべての角の丸みを指定する
-
borderTopLeftRadius：左上の角の丸みを指定する
-
borderTopRightRadius：右上の角の丸みを指定する
-
borderBottomLeftRadius：左下の角の丸みを指定する
-
borderBottomRightRadius：右下の角の丸みを指定する
-
borderTopStartRadius：左上（RTL環境では右上）の角の丸みを指定する
-
borderTopEndRadius：左上（RTL環境では右上）の角の丸みを指定する
-
borderBottomStartRadius：左下（RTL環境では右下）の角の丸みを指定する
-
borderBottomEndRadius：左下（RTL環境では右下）の角の丸みを指定する
-
-
枠線の色に関するもの
-
borderColor：すべての辺の色を指定する
-
borderTopColor：上辺の色を指定する
-
borderLeftColor：左辺の色を指定する
-
borderRightColor：右辺の色を指定する
-
borderStartColor：左辺（RTL環境では右辺）の色を指定する
-
borderEndColor：右辺（RTL環境では左辺）の色を指定する
-
-
枠線の形に関するもの
- borderStyle：枠線を実線と破線のどちらで表示するかを指定する
他にも、次のプロパティが利用できます。
- backfaceVisibility：transform等で裏返したときに背面を見えるようにするかどうかを指定する
- backgroundColor：背景色を指定する
- opacity：不透明度を指定する
プロパティの名前がキャメルケースに変わっていますが、CSSのものとほとんど使い方は同じです。
React Native独自の指定方法として、上下左右の代わりにStartやEndが指定されているものがあります。これは、AndroidやiOSが、アラビア語やヘブライ語のように右から左に向かって記述する言語をサポートするために用意された指定方法です。右から左ということで、RTL（Right-To-Left）の名前で呼ばれます。OSの表示設定が英語のように左から記述する（Left-To-Rightな）言語になっているときはStartが左、Endが右になりますし、RTLな言語ではStartが右、Endが左になります。中東地域でも使われるようなグローバルなアプリを作りたい場合には、覚えておくとよいでしょう。
影に関するプロパティはAndroid/iOSで別々に提供
コンポーネントに影を付けるためのプロパティは、AndroidとiOSで別々のスタイルが用意されています。
-
Android向けのスタイル（ドキュメント）
- elevation：Viewを浮かばせる高さを指定する
-
iOS向けのスタイル（ドキュメント）
- shadowColor：影の色を指定する
- shadowOffset：影のずらし幅を指定する
- shadowOpacity：影の不透明度を指定する
- shadowRadius：影の丸みを指定する
React Nativeの対応が先行していたiOSでは細かく影の出し方を指定できるAPIが提供されていました。その一方で、Androidのデザイン仕様となったマテリアルデザインでは、Elevationという紙をどのくらい浮かせるかの観点でAPIが作られ、影そのものについては操作しないことになりました。そのため、React Nativeのスタイルにおいても統合されることはなく、別々に用意されることになったと思われます。
transform
コンポーネントに回転・拡大縮小等の変形をさせるためのtransformも用意されています。少し形は違うものの、CSSのtransformと近い名前のプロパティを指定できます。公式ドキュメントにはいくつかの項目がありますが、現在ではtransformプロパティだけですべての操作ができるようです。
実際に使用する場合は、リスト5のように、操作したい内容1つにつき1オブジェクトになるよう配列を作成します。
const styles = StyleSheet.create({
view: {
transform: [
{ rotateX: '45deg' }, // X軸を45度回す
{ rotateZ: '0.785398rad' }, // Z軸を0.785398ラジアン回す
{ skewX: '125deg' }, // X軸方向に125度傾斜する
]
},
}
X軸とZ軸についてViewを回転させ、さらにViewそのものを少し傾斜させました。
これを縦に並べたViewに適用すると、図4のように変形させることができます。
ここまでできるのは面白いですね。いろいろと応用が利きそうです。
