メインコンテンツへスキップ

StyleSheet

StyleSheetはCSSのStyleSheetsに似た抽象化です。

コード品質のヒント

  • スタイルをレンダー関数から移動させることで、コードが理解しやすくなります。
  • スタイルに名前を付けることは、レンダー関数内の低レベルなコンポーネントに意味を加え、再利用を促進する良い方法です。
  • ほとんどのIDEでは、StyleSheet.create()を使用すると、静的型チェックと有効なスタイルを記述するためのサジェスチョンが提供されます。

リファレンス

メソッド​

compose()​

tsx
static compose(style1: Object, style2: Object): Object | Object[];

2つのスタイルを結合し、style2がstyle1のどのスタイルよりも優先されるようにします。どちらかのスタイルがfalsyな値の場合、もう一方のスタイルが配列を割り当てずに返されるため、メモリ割り当てを節約し、PureComponentのチェックのための参照の同一性を維持します。

create()​

tsx
static create(styles: Object extends Record<string, ViewStyle | ImageStyle | TextStyle>): Object;

スタイルを作成するための恒等関数です。StyleSheet.create()内でスタイルを作成する主な実用的な利点は、ネイティブのスタイルプロパティに対する静的型チェックです。

flatten()​

tsx
static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle | TextStyle>>): Object;

スタイルオブジェクトの配列を、1つの集約されたスタイルオブジェクトにフラット化します。

setStyleAttributePreprocessor()​

警告：実験的機能です。破壊的変更が頻繁に発生する可能性が高く、確実に通知されるとは限りません。全体が削除される可能性もあります。自己責任で使用してください。

tsx
static setStyleAttributePreprocessor(
  property: string,
  process: (propValue: any) => any,
);

スタイルプロパティの値を事前処理するために使用する関数を設定します。これは内部で色や変換の値を処理するために使用されます。本当に何をしているか理解しており、他の選択肢を使い果たした場合以外は使用しないでください。

プロパティ​

absoluteFill​

position: 'absolute'とゼロポジショニング（left: 0, right: 0, top: 0, bottom: 0）を使用してオーバーレイを作成するのは非常に一般的なパターンです。そのため、absoluteFillは利便性のために、またこれらの繰り返されるスタイルの重複を減らすために使用できます。必要であれば、absoluteFillを使用してStyleSheetにカスタマイズされたエントリーを作成することもできます。例：

absoluteFillObject​

absoluteFillを使いつつ、いくつかの微調整を加えたい場合があります。absoluteFillObjectを使用して、StyleSheetにカスタマイズされたエントリーを作成できます。例：

hairlineWidth​

これはプラットフォーム上の細い線の幅として定義されています。境界線や2つの要素間の区切り線の太さとして使用できます。例：

この定数は常にピクセルの整数値になります（そのため、それによって定義された線はくっきりと見えます）し、基盤となるプラットフォーム上の細い線の標準的な幅に一致しようとします。しかし、異なるプラットフォームや画面密度ではその値が異なる方法で計算される可能性があるため、一定のサイズであることに依存すべきではありません。

シミュレータが縮小表示されている場合、ヘアライン幅の線は見えないことがあります。