React Nativeの公式ドキュメントを和訳してみる 5 - Style

注意

当記事はReact Native 0.51の公式ドキュメントの独自和訳です。間違いなどあればご指摘ください。

バージョン0.51のドキュメントに準拠します。

参照リンク先は基本的に元サイトです。リンク先サイトを和訳したらそのページに差し替えます。

本家サイトではシミュレータがあり、コードを編集しながら実行でき便利です。

Facebook社に無断なので怒られたら消します。

元サイト
facebook.github.io

ReactNativeでは、styleを定義するのに特別な言語も記法も用いません。JavaScriptを使うだけです。全てのコアコンポーネントでstyleというpropが使用できます。styleの名前と値はweb上のCSSと大体同じですが、名前がキャメルケースになります。例えば、background-colorはbackgroundColorになります。

styleというpropは単純な昔からあるJavaScriptのオブジェクトで表されます。もっとも単純で、普段から例としてあげるコードです。複数のstyleを配列で渡すこともできます。後に書かれたstyleが優先されるため、styleを継承させるためにも使えるでしょう。

コンポーネントが複雑に肥大してくると、StyleSheet.createを使って複数のstyleを一箇所に定義した方が綺麗になることがしばしばあります。これは、その例です。

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

// Create React Native App使ってたらこの行は飛ばす
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);

一つのコモンパターンとして、styleのpropを受け付けるコンポーネントを作成し、サブコンポーネントをデザインするために順番につかう方法があります。CSSでいう”cascade”を作るのに使えますね。

テキストのスタイルをカスタマイズするのにはたくさんのやり方があります。完全な一覧はテキストコンポーネントのレファレンスをチェックしてください。

さて、テキストを美しく彩ることができるようになりました。次のステップは、スタイルマスターになるためにコンポーネントのサイズをコントロールする術を学びましょう。