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

StatusBar

アプリのステータスバーを制御するコンポーネント。ステータスバーは、通常画面上部に位置し、現在時刻、Wi-Fiおよび携帯電話ネットワーク情報、バッテリー残量、その他ステータスアイコンなどを表示する領域です。

Navigatorでの使用​

複数のStatusBarコンポーネントを同時にマウントすることが可能です。プロップは、StatusBarコンポーネントがマウントされた順序でマージされます。

命令型API​

コンポーネントの使用が理想的でない場合のために、コンポーネントの静的関数として公開されている命令型APIもあります。ただし、静的APIとコンポーネントを同じプロップに使用することは推奨されません。なぜなら、静的APIによって設定された値は、次のレンダーでコンポーネントによって設定された値によって上書きされるためです。

リファレンス

定数​

currentHeight
Android
​

ステータスバーの高さ。存在する場合は、ノッチの高さも含まれます。

Props​

animated​

ステータスバーのプロパティ変更間のトランジションをアニメーションさせるかどうか。backgroundColor、barStyle、hiddenプロパティでサポートされています。

型必須デフォルト
booleanNofalse

backgroundColor
Android
​

ステータスバーの背景色。

警告

Android 15で導入されたエッジツーエッジの強制により、ステータスバーの背景色の設定はAPIレベル35で非推奨となり、設定しても効果がありません。エッジツーエッジに関する推奨事項については、こちらをご覧ください。

型必須デフォルト
colorNoデフォルトのシステムStatusBar背景色、または定義されていない場合は'black'

barStyle​

ステータスバーのテキストの色を設定します。

Androidでは、これはAPIバージョン23以降にのみ影響します。

型必須デフォルト
StatusBarStyleNo'default'

hidden​

ステータスバーが非表示の場合。

型必須デフォルト
booleanNofalse

networkActivityIndicatorVisible
iOS
​

ネットワークアクティビティインジケーターを表示するかどうか。

型デフォルト
booleanfalse

showHideTransition
iOS
​

hiddenプロップを使用してステータスバーの表示/非表示を切り替える際のトランジション効果。

型デフォルト
StatusBarAnimation'fade'

translucent
Android
​

ステータスバーが半透明である場合。translucentをtrueに設定すると、アプリはステータスバーの下に描画されます。これは、半透明のステータスバーの色を使用する場合に便利です。

警告

Android 15で導入されたエッジツーエッジの強制により、ステータスバーを半透明に設定することはAPIレベル35で非推奨となり、設定しても効果がありません。エッジツーエッジに関する推奨事項については、こちらをご覧ください。

型デフォルト
booleanfalse

Methods​

popStackEntry()​

tsx
static popStackEntry(entry: StatusBarProps);

スタックから最後のStatusBarエントリを取得して削除します。

パラメータ

名前型説明
entry
必須
anypushStackEntryから返されたエントリ。

pushStackEntry()​

tsx
static pushStackEntry(props: StatusBarProps): StatusBarProps;

StatusBarエントリをスタックにプッシュします。完了したら、戻り値をpopStackEntryに渡す必要があります。

パラメータ

名前型説明
props
必須
anyスタックエントリで使用するStatusBarプロップを含むオブジェクト。

replaceStackEntry()​

tsx
static replaceStackEntry(
  entry: StatusBarProps,
  props: StatusBarProps
): StatusBarProps;

既存のStatusBarスタックエントリを新しいプロップで置き換えます。

パラメータ

名前型説明
entry
必須
any置き換えるpushStackEntryから返されたエントリ。
props
必須
any置き換えスタックエントリで使用するStatusBarプロップを含むオブジェクト。

setBackgroundColor()
Android
​

tsx
static setBackgroundColor(color: ColorValue, animated?: boolean);

ステータスバーの背景色を設定します。

警告

Android 15で導入されたエッジツーエッジの強制により、ステータスバーの背景色の設定はAPIレベル35で非推奨となり、設定しても効果がありません。エッジツーエッジに関する推奨事項については、こちらをご覧ください。

パラメータ

名前型説明
color
必須
string背景色。
animatedbooleanスタイル変更をアニメーション化します。

setBarStyle()​

tsx
static setBarStyle(style: StatusBarStyle, animated?: boolean);

ステータスバーのスタイルを設定します。

パラメータ

名前型説明
style
必須
StatusBarStyle設定するステータスバーのスタイル。
animatedbooleanスタイル変更をアニメーション化します。

setHidden()​

tsx
static setHidden(hidden: boolean, animation?: StatusBarAnimation);

ステータスバーを表示または非表示にします。

パラメータ

名前型説明
hidden
必須
booleanステータスバーを非表示にします。
animation
iOS
StatusBarAnimationステータスバーの非表示プロパティを変更する際のアニメーション。

setNetworkActivityIndicatorVisible()
iOS
​

tsx
static setNetworkActivityIndicatorVisible(visible: boolean);

ネットワークアクティビティインジケーターの表示を制御します。

パラメータ

名前型説明
visible
必須
booleanインジケーターを表示します。

setTranslucent()
Android
​

tsx
static setTranslucent(translucent: boolean);

ステータスバーの半透明性を制御します。

警告

Android 15で導入されたエッジツーエッジの強制により、ステータスバーを半透明に設定することはAPIレベル35で非推奨となり、設定しても効果がありません。エッジツーエッジに関する推奨事項については、こちらをご覧ください。

パラメータ

名前型説明
translucent
必須
boolean半透明に設定します。

型定義​

StatusBarAnimation​

iOSでのトランジション用のステータスバーアニメーションタイプ。

型
enum

定数

値型説明
'fade'stringフェードアニメーション
'slide'stringスライドアニメーション
'none'stringアニメーションなし

StatusBarStyle​

ステータスバーのスタイルタイプ。

型
enum

定数

値型説明
'default'stringデフォルトのステータスバースタイル（iOSは暗い、Androidは明るい）
'light-content'string白いテキストとアイコン
'dark-content'string暗いテキストとアイコン（AndroidではAPI>=23が必要）