レイアウトと装飾のためのスタイル機能（2）
StyleSheetモジュール
スタイルはstyle属性に直接オブジェクトを記述することでも実現できますが、JSXの記述量が肥大化しやすいデメリットがあります。この問題を解決するため、React NativeではStyleSheetという、スタイルをまとめて記述するためのモジュールが提供されています。リスト2のように、StyleSheet.createを使います。
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
red: {
color: '#FF0000',
},
bigBlue: {
color: '#0000FF',
fontSize: 24,
},
});
スタイルのオブジェクトに、redやbigBlueといった名前を付けて管理します。これを実際のコンポーネントに適用する場合は、リスト3の形になります。
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function App() {
return (
<View>
<Text style={styles.red}>赤文字</Text>{/* (1) */}
<Text style={styles.bigBlue}>大きい青文字</Text>
<Text style={[styles.bigBlue, styles.red]}>{/* (2) */}
大きい青文字に赤文字を上書き
</Text>
<Text style={[styles.red, styles.bigBlue]}>{/* (3) */}
赤文字に大きい青文字を上書き
</Text>
</View>
);
}
const styles = StyleSheet.create({
red: {
color: '#FF0000',
},
bigBlue: {
color: '#0000FF',
fontSize: 24,
},
});
リスト2で指定した名前を（1）のstyles.redの形で呼び出しています。この呼び方なら、スタイルがどんなに複雑になってもJSXには名前だけを与えればいいので、スッキリしますね。
ただのオブジェクトとして定義した場合と比べると、少し取り回しが悪くなってしまうのが難点ですが、（2）や（3）のように配列でスタイルを並べれば、スタイルを統合して扱うこともできます。リスト3を実行すると、図2のようになります。
配列で書いたスタイルは、後に書いたもののほうが優先して反映されます。styles.redにもstyles.bigBlueにもcolorプロパティがあるので、リスト3の（3）では後から指定された青のほうが反映され、styles.redの効果はなくなってしまったわけです。
色の指定方法
色について指定する場合、次の値を設定できます。
-
カラー名（例：
'red','blue'） -
16進数表記のカラーコード（例：
'#FF0000'） -
rgb()関数表記（例：'rgb(255, 0, 255)'） -
rgba()関数表記（例：'rgba(255, 255, 255, 1.0)'） -
hsl()関数表記（例：'hsl(360, 100%, 100%)'） -
hsla()関数表記（例：'hsla(360, 100%, 100%, 1.0)'） -
'transparent'
使用できるすべてのカラー名についてはドキュメントを参照してください。CSS Color Module Level 4で策定されているものについては使用できるようです。
rgb()は、赤（Red）、緑（Green）、青（Blue）の割合を0～255の範囲で指定することで、色を表現します。
一方hsl()は、色相（Hue）、彩度（Saturation）、輝度（Lightness/Luminance）の組み合わせで色を表現する方式です。色相は0～360の（色相環における）角度で、彩度と輝度は0～100%の割合で指定します。
rgba()やhsla()は、これらの指定方法に透明度（Alpha）の指定を追加したものです。0.0～1.0の値を指定でき、0.0が完全に透明、1.0が完全に不透明となります。
単位の指定方法
モバイルアプリ開発では、長さや大きさの単位がよく課題になります。端末によってピクセルのサイズが違うため、長さや大きさをピクセル（px）で指定すると、端末によってボタンや文字の大きさが変わってしまうのです。
この問題を解決するため、AndroidやiOSでは、ピクセルサイズに依存しない、現実世界での大きさを重視した、抽象化された単位を使用しています。
-
Androidの単位
-
dp：長さの単位 -
sp：フォントサイズの単位
-
-
iOSの単位
-
pt：長さ、フォントサイズの単位
-
React Nativeのスタイル指定では、これらをさらに抽象化するために単位を付けないといった思い切った方針をとっています。
const styles = StyleSheet.create({
text: {
width: 300, // Android: 300dp, iOS: 300pt
fontSize: 24, // Android: 24sp, iOS: 24pt
},
}
リスト4では、長さであるwidthや文字の大きさであるfontSizeに対して、number型の数値リテラルを指定してします。これは、React Nativeがスタイルを評価してネイティブUIに翻訳する過程で、dpやspやptといった単位に適切に変換されるため、問題なく運用できます。逆に、pxなどの単位を付けると動かなくなるため、癖で単位を付けてしまわないよう、注意が必要です。
