React Native基礎

コンポーネントのスタイル

コンポーネントのスタイル

コンポーネントにスタイルを設定するにはstyleプロパティを使います。Reactと同じようにスタイルはオブジェクトとしてCSSのプロパティをキャメルケースで指定します。

<Text style={{color: 'red'}}>
  このテキストは赤色で表示されます。
</Text>
<Text style={{fontSize: 20}}>
  このテキストは大きく表示されます。
</Text>

なお、一部React NativeにはないCSSプロパティもあります。例えばborderプロパティで線幅と線色をまとめて指定するといったことはできません（borderWidthとborderColorを別々に指定します）。指定可能なプロパティについては以下のURLを確認してください。
https://reactnative.dev/docs/view-style-props
https://reactnative.dev/docs/text-style-props

各コンポーネントにスタイルを直接記述しているとアプリの規模が大きくなってきた場合に修正箇所を探すのが煩雑になってきます。このような場合はStyleSheetオブジェクトを使用することで、HTMLのクラス名とそれに対するCSSの指定のようにスタイル設定を分離し、修正がしやすくなります。

StyleSheetオブジェクトは以下のようにcreateメソッドを使用して作成します。createメソッドの引数にはオブジェクトを指定します。オブジェクトのプロパティとしてスタイルのオブジェクトを設定します。このようにして作成したStyleSheetオブジェクトは「styles.important」のように参照することができます。
※ただのオブジェクトのオブジェクトでも同じことができますが、React NativeではStyleSheetオブジェクトが使われることが多いようです。

const styles = StyleSheet.create({
  important: {
    color: 'red'
  },
  bigText: {
    fontSize: 20
  }
});

コンポーネントのスタイルに作成したStyleSheetオブジェクトを利用するときは以下のようにします（スタイルを直接埋め込む場合と異なり中カッコは一重です）。なお、styleプロパティには配列を指定することができます（中カッコの後に大カッコが必要な点に注意）。この場合、指定したスタイルがすべて適用されます（各スタイルで同じプロパティが指定されている場合はHTMLクラスと同じように後で指定した方が有効になります）

<Text style={styles.important}>
  重要
</Text>
<Text style={styles.bigText}>
  強調
</Text>
<Text style={[styles.important, styles.bigText]}>
  重要かつ強調
</Text>