スタイル

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

styleプロップは、ごく普通のJavaScriptオブジェクトにすることができます。これが、私たちが例のコードで通常使用するものです。スタイルの配列を渡すこともできます。配列内の最後のスタイルが優先されるため、これを使用してスタイルを継承できます。

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

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

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

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

既知の問題

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