StyleSheet

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

コード品質のヒント

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

リファレンス

Methods

`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()`

実験的

破壊的変更が頻繁に発生する可能性があり、 reliably に発表されることはありません。全体が削除される可能性もあります。ご自身の責任において使用してください。

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

スタイルプロパティ値を前処理するために使用する関数を設定します。これは、色と変換の値を処理するために内部的に使用されます。自分が何をしているかを本当に理解し、他の選択肢を使い果たしていない限り、これを使用すべきではありません。

プロパティ

`absoluteFill`

非常に一般的なパターンは、position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 のように、position: absolute とゼロ位置指定でオーバーレイを作成することです。そのため、absoluteFill は利便性のために、これらの繰り返されるスタイルの重複を減らすために使用できます。必要に応じて、absoluteFill を使用して StyleSheet にカスタムエントリを作成できます。例：

`absoluteFillObject`

absoluteFill を使いたいが、いくつかの調整が必要な場合があります。absoluteFillObject は、StyleSheet にカスタムエントリを作成するために使用できます。例：

`hairlineWidth`

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

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

シミュレーターがダウンスケールされている場合、ヘアライン幅の線は表示されない可能性があります。

リファレンス

Methods​

compose()​

create()​

flatten()​

setStyleAttributePreprocessor()​

プロパティ​

absoluteFill​

absoluteFillObject​

hairlineWidth​