スタイル

React Nativeでは、JavaScriptを使用してアプリケーションのスタイルを設定します。すべてのコアコンポーネントは、styleという名前のpropを受け入れます。スタイルの名前と値は、通常、Web上のCSSの動作と一致しますが、名前はキャメルケースで記述されます。例えば、background-colorではなくbackgroundColorとなります。

style propは、プレーンなJavaScriptオブジェクトにすることができます。これはサンプルコードで通常使用する方法です。また、スタイルの配列を渡すこともできます。配列の最後のスタイルが優先されるため、これを使用してスタイルを継承することができます。

コンポーネントが複雑になるにつれて、StyleSheet.createを使用して複数のスタイルを1か所で定義する方が、しばしばクリーンになります。以下に例を示します。

一般的なパターンの1つは、コンポーネントがstyle propを受け入れ、それがサブコンポーネントのスタイル設定に使用されるようにすることです。これを使用して、CSSのようにスタイルを「カスケード」させることができます。

テキストスタイルをカスタマイズする方法は他にもたくさんあります。完全なリストについては、Textコンポーネントリファレンスを確認してください。

これでテキストを美しくすることができるようになりました。スタイルエキスパートになるための次のステップは、コンポーネントのサイズを制御する方法を学ぶことです。

既知の問題

• react-native#29308: React NativeがWeb上のCSSの動作と一致しない場合があります。例えば、タッチ領域は親ビューの境界を越えて広がることはなく、Androidでは負のマージンはサポートされていません。