StyleSheet

StyleSheet は、CSS スタイルシートに似た抽象化です。

コード品質のヒント

スタイルを render 関数から分離することで、コードが理解しやすくなります。
スタイルに名前を付けることは、render 関数内の低レベルコンポーネントに意味を追加し、再利用を促進する良い方法です。
ほとんどの IDE では、StyleSheet.create() を使用すると、静的な型チェックと、有効なスタイルを作成するための提案が得られます。

リファレンス

メソッド

`compose()`

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

2 つのスタイルを結合し、style2 が style1 のスタイルを上書きするようにします。いずれかのスタイルが偽値の場合、配列を割り当てることなくもう一方のスタイルが返され、割り当てを節約し、PureComponent チェックの参照等価性を維持します。

`create()`

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

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

`flatten()`

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

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

`setStyleAttributePreprocessor()`

警告: 実験的。破壊的な変更が頻繁に行われ、信頼性のある告知は行われません。すべてが削除される可能性もあります。自己責任で使用してください。

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

スタイルプロパティの値を前処理するために使用する関数を設定します。これは、色と変換値を処理するために内部で使用されます。本当に何をしているのか理解していて、他のオプションを使い果たした場合を除き、これを使用しないでください。

プロパティ

`absoluteFill`

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

`absoluteFillObject`

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

`hairlineWidth`

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

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

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

リファレンス

メソッド​

compose()​

create()​

flatten()​

setStyleAttributePreprocessor()​

プロパティ​

absoluteFill​

absoluteFillObject​

hairlineWidth​