スタイル

React Native では、JavaScript を使用してアプリケーションにスタイルを設定します。すべての主要コンポーネントは style というプロパティを受け取ります。スタイル名は web の CSS の仕組みと通常一致しますが、名前はキャメルケースで記述されます (例: backgroundColor ではなく background-color)。

style プロパティは、単純なプレーン JavaScript オブジェクトにすることができます。私たちはこのコードを普段例に使用します。配列のスタイルを渡すこともできます。配列の最後のスタイルが優先されるため、これを使用してスタイルを継承できます。

コンポーネントが複雑になると、StyleSheet.create を使用して、1か所に複数のスタイルを定義するほうがきれいになることがあります。以下に例を示します。

一般的なパターンの1つは、その結果、サブコンポーネントのスタイルするために使用される style プロパティを受け入れるコンポーネントを作成することです。これを使用して CSS で行うのと同じ方法でスタイルを「カスケード」することができます。

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

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

既知の問題

• react-native#29308: 場合によっては、React Native は web での CSS の仕組みと一致しません (例: タッチエリアは親ビューの範囲を超えることはなく、Android では負のマージンはサポートされていません)。