使用例
リファレンス
Props
backfaceVisibility
| 型 |
|---|
enum('visible', 'hidden') |
backgroundColor
borderBottomColor
borderBottomEndRadius
borderBottomLeftRadius
borderBottomRightRadius
borderBottomStartRadius
borderStartEndRadius
borderStartStartRadius
borderEndEndRadius
borderEndStartRadius
borderBottomWidth
borderColor
borderCurve
iOS
iOS 13以降では、境界線の角のカーブを変更できます。
| 型 |
|---|
enum('circular', 'continuous') |
borderEndColor
borderLeftColor
borderLeftWidth
borderRadius
角丸の境界線が見えない場合は、overflow: 'hidden' も適用してみてください。
borderRightColor
borderRightWidth
borderStartColor
borderStyle
| 型 |
|---|
enum('solid', 'dotted', 'dashed') |
borderTopColor
borderTopEndRadius
borderTopLeftRadius
borderTopRightRadius
borderTopStartRadius
borderTopWidth
borderWidth
boxShadow
boxShadow は新しいアーキテクチャでのみ利用可能です。外側のシャドウは Android 9+ でのみサポートされています。内側のシャドウは Android 10+ でのみサポートされています。
要素にシャドウ効果を追加し、シャドウの位置、色、サイズ、ぼかしを制御できます。このシャドウは、シャドウが内側かどうかによって、要素のボーダーボックスの外側または内側に表示されます。これは、同名のウェブスタイルプロパティの仕様に準拠した実装です。BoxShadowValue のドキュメントで利用可能なすべての引数について詳しくお読みください。
これらのシャドウは結合できるため、単一の boxShadow が複数の異なるシャドウで構成されることがあります。
boxShadow は、ウェブ構文を模倣した文字列、または BoxShadowValue オブジェクトの配列を受け取ります。
| 型 |
|---|
| BoxShadowValue オブジェクトの配列 | 文字列 |
カーソル
iOS
iOS 17以降では、pointer を設定することで、ポインター（iOS のトラックパッドやスタイラス、visionOS のユーザーの視線など）がビュー上にあるときにホバー効果が可能になります。
エレベーション
Android
Android の基盤となるエレベーション API を使用して、ビューのエレベーションを設定します。これにより、アイテムにドロップシャドウが追加され、重なり合うビューの Z オーダーに影響を与えます。Android 5.0 以降でのみサポートされており、それ以前のバージョンでは効果がありません。
filter
View にグラフィカルフィルターを追加します。このフィルターは、それぞれが View のグラフィカルな構成に対する何らかの原子的な変更を表す、任意の数のフィルター関数で構成されます。有効なフィルター関数の完全なリストは以下に定義されています。filter は、View 自体だけでなく、View の子孫にも適用されます。filter は overflow: hidden を意味するため、子孫は View の境界に収まるようにクリップされます。
以下のフィルター関数はすべてのプラットフォームで機能します
brightness: View の明るさを変更します。負でない数値またはパーセンテージを受け取ります。opacity: View の不透明度、またはアルファ値を変更します。負でない数値またはパーセンテージを受け取ります。
パフォーマンスと仕様準拠の問題のため、iOS で利用できるフィルター関数はこれら 2 つのみです。この実装のために UIKit の代わりに SwiftUI を使用して、いくつかの潜在的な回避策を検討する計画があります。
Android
以下のフィルター関数は Android のみで機能します
blur: 指定された長さがぼかしアルゴリズムで使用される半径を表すガウスぼかしで View をぼかします。負でない DIP 値はすべて有効です（パーセントは不可）。値が大きいほど、結果はよりぼやけます。contrast: View のコントラストを変更します。負でない数値またはパーセンテージを受け取ります。dropShadow: View のアルファマスクの周りにシャドウを追加します（View 内の非ゼロアルファピクセルのみがシャドウを落とします）。シャドウの色を表すオプションの色と、2 または 3 つの長さを受け取ります。2 つの長さが指定された場合、それらはシャドウを X および Y 次元でそれぞれ変換する offsetX と offsetY として解釈されます。3 番目の長さが与えられた場合、それはシャドウに適用されるガウスぼかしの標準偏差として解釈されます。したがって、値が大きいほどシャドウがよりぼかされます。DropShadowValue で引数について詳しくお読みください。grayscale: 指定された量だけ View をグレースケールに変換します。負でない数値またはパーセンテージを受け取ります。1 または 100% は完全なグレースケールを表します。hueRotate: View の色相を変更します。この関数の引数は、色相が回転する色輪の角度を定義します。したがって、例えば 360deg は効果がありません。この角度は deg または rad 単位を持つことができます。invert: View 内の色を反転させます。負でない数値またはパーセンテージを受け取ります。1 または 100% は完全な反転を表します。sepia: View をセピアに変換します。負でない数値またはパーセンテージを受け取ります。1 または 100% は完全なセピアを表します。saturate: View の彩度を変更します。負でない数値またはパーセンテージを受け取ります。
blur と dropShadow は Android 12+ でのみサポートされています
filter は、上記のフィルター関数からなるオブジェクトの配列、またはウェブ構文を模倣した文字列のいずれかを受け取ります。
| 型 |
|---|
オブジェクトの配列：{brightness: number|string}、{opacity: number|string}、{blur: number|string}、{contrast: number|string}、{dropShadow: DropShadowValue|string}、{grayscale: number|string}、{hueRotate: number|string}、{invert: number|string}、{sepia: number|string}、{saturate: number|string}、または文字列 |
opacity
outlineColor
要素のアウトラインの色を設定します。詳細についてはウェブドキュメントを参照してください。
outlineOffset
アウトラインと要素の境界線との間のスペース量を設定します。レイアウトには影響しません。詳細についてはウェブドキュメントを参照してください。
outlineStyle
要素のアウトラインのスタイルを設定します。詳細についてはウェブドキュメントを参照してください。
| 型 |
|---|
enum('solid', 'dotted', 'dashed') |
outlineWidth
要素の周囲、ボーダーの外側に描かれるアウトラインの幅です。レイアウトには影響しません。詳細についてはウェブドキュメントを参照してください。
pointerEvents
View がタッチイベントのターゲットになるかどうかを制御します。
'auto': View はタッチイベントのターゲットになり得ます。'none': View は決してタッチイベントのターゲットになりません。'box-none': View は決してタッチイベントのターゲットになりませんが、そのサブビューはなり得ます。'box-only': View はタッチイベントのターゲットになり得ますが、そのサブビューはなり得ません。
| 型 |
|---|
enum('auto', 'box-none', 'box-only', 'none' ) |