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

StatusBar

アプリのステータスバーを制御するためのコンポーネントです。ステータスバーは通常、画面の上部にある領域で、現在の時刻、Wi-Fiや携帯電話ネットワークの情報、バッテリー残量、その他のステータスアイコンが表示されます。

ナビゲーターでの使用法​

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

命令的API​

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

リファレンス

定数​

currentHeight
Android
​

ステータスバーの高さで、ノッチがある場合はその高さも含まれます。

Props​

animated​

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

型必須デフォルト
booleanいいえfalse

backgroundColor
Android
​

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

警告

Android 15で導入されたedge-to-edgeの強制適用により、ステータスバーの背景色の設定はAPIレベル35で非推奨となり、設定しても効果がなくなります。私たちのedge-to-edgeに関する推奨事項はこちらで詳しく読むことができます。

型必須デフォルト
colorいいえデフォルトのシステムStatusBar背景色、または未定義の場合は'black'

barStyle​

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

Androidでは、これはAPIバージョン23以上でのみ効果があります。

型必須デフォルト
StatusBarStyleいいえ'default'

hidden​

ステータスバーを非表示にするかどうか。

型必須デフォルト
booleanいいえfalse

networkActivityIndicatorVisible
iOS
​

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

型デフォルト
booleanfalse

showHideTransition
iOS
​

hiddenプロパティを使用してステータスバーを表示・非表示にする際のトランジション効果です。

型デフォルト
StatusBarAnimation'fade'

translucent
Android
​

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

警告

Android 15で導入されたedge-to-edgeの強制適用により、ステータスバーを半透明に設定することはAPIレベル35で非推奨となり、設定しても効果がなくなります。私たちのedge-to-edgeに関する推奨事項はこちらで詳しく読むことができます。

型デフォルト
booleanfalse

メソッド​

popStackEntry()​

tsx
static popStackEntry(entry: StatusBarProps);

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

パラメータ

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

pushStackEntry()​

tsx
static pushStackEntry(props: StatusBarProps): StatusBarProps;

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

パラメータ

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

replaceStackEntry()​

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

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

パラメータ

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

setBackgroundColor()
Android
​

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

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

警告

Android 15で導入されたedge-to-edgeの強制適用により、ステータスバーの背景色の設定はAPIレベル35で非推奨となり、設定しても効果がなくなります。私たちのedge-to-edgeに関する推奨事項はこちらで詳しく読むことができます。

パラメータ

名前型説明
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ステータスバーのhiddenプロパティを変更する際のアニメーション。

setNetworkActivityIndicatorVisible()
iOS
​

tsx
static setNetworkActivityIndicatorVisible(visible: boolean);

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

パラメータ

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

setTranslucent()
Android
​

tsx
static setTranslucent(translucent: boolean);

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

警告

Android 15で導入されたedge-to-edgeの強制適用により、ステータスバーを半透明に設定することはAPIレベル35で非推奨となり、設定しても効果がなくなります。私たちのedge-to-edgeに関する推奨事項はこちらで詳しく読むことができます。

パラメータ

名前型説明
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が必要）