Barra de estado
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Componente para controlar la barra de estado de la aplicación. La barra de estado es el área, típicamente en la parte superior de la pantalla, que muestra la hora actual, información de red Wi-Fi y celular, nivel de batería y/u otros iconos de estado.
Uso con Navigator
Es posible tener múltiples componentes StatusBar montados simultáneamente. Las props se fusionarán en el orden en que se montaron los componentes StatusBar.
- TypeScript
- JavaScript
API imperativa
Para casos donde usar un componente no es ideal, también existe una API imperativa expuesta como funciones estáticas en el componente. Sin embargo, no se recomienda usar la API estática y el componente para la misma prop porque cualquier valor establecido por la API estática será sobrescrito por el establecido por el componente en la siguiente renderización.
Referencia
Constantes
currentHeight Android
La altura de la barra de estado, que incluye la altura del notch si está presente.
Props
animated
Indica si las transiciones entre cambios de propiedades de la barra de estado deben animarse. Compatible con las propiedades backgroundColor, barStyle y hidden.
| Type | Required | Default |
|---|---|---|
| boolean | No | false |
backgroundColor Android
El color de fondo de la barra de estado.
Debido a la implementación edge-to-edge introducida en Android 15, establecer el color de fondo de la barra de estado está obsoleto en el nivel API 35 y configurarlo no tendrá efecto. Puedes leer más sobre nuestras recomendaciones edge-to-edge aquí.
| Type | Required | Default |
|---|---|---|
| color | No | default system StatusBar background color, or 'black' if not defined |
barStyle
Establece el color del texto de la barra de estado.
En Android, esto solo tendrá efecto en versiones API 23 y superiores.
| Type | Required | Default |
|---|---|---|
| StatusBarStyle | No | 'default' |
hidden
Indica si la barra de estado está oculta.
| Type | Required | Default |
|---|---|---|
| boolean | No | false |
networkActivityIndicatorVisible iOS
Indica si el indicador de actividad de red debe ser visible.
| Type | Default |
|---|---|
| boolean | false |
showHideTransition iOS
El efecto de transición al mostrar y ocultar la barra de estado usando la prop hidden.
| Type | Default |
|---|---|
| StatusBarAnimation | 'fade' |
translucent Android
Indica si la barra de estado es translúcida. Cuando translucent se establece en true, la aplicación se dibujará bajo la barra de estado. Esto es útil cuando se usa un color semitransparente para la barra de estado.
Debido a la aplicación edge-to-edge introducida en Android 15, establecer la barra de estado como translúcida queda obsoleto en el nivel de API 35 y configurarlo no tendrá efecto. Puedes leer más sobre nuestras recomendaciones de edge-to-edge aquí.
| Type | Default |
|---|---|
| boolean | false |
Métodos
popStackEntry()
static popStackEntry(entry: StatusBarProps);
Obtiene y elimina la última entrada de StatusBar de la pila.
Parámetros:
| Name | Type | Description |
|---|---|---|
| entry Required | any | Entry returned from pushStackEntry. |
pushStackEntry()
static pushStackEntry(props: StatusBarProps): StatusBarProps;
Inserta una entrada de StatusBar en la pila. El valor devuelto debe pasarse a popStackEntry cuando se complete.
Parámetros:
| Name | Type | Description |
|---|---|---|
| props Required | any | Object containing the StatusBar props to use in the stack entry. |
replaceStackEntry()
static replaceStackEntry(
entry: StatusBarProps,
props: StatusBarProps
): StatusBarProps;
Reemplaza una entrada existente de la pila de StatusBar con nuevas props.
Parámetros:
| Name | Type | Description |
|---|---|---|
| entry Required | any | Entry returned from pushStackEntry to replace. |
| props Required | any | Object containing the StatusBar props to use in the replacement stack entry. |
setBackgroundColor() Android
static setBackgroundColor(color: ColorValue, animated?: boolean);
Establece el color de fondo de la barra de estado.
Debido a la implementación edge-to-edge introducida en Android 15, establecer el color de fondo de la barra de estado está obsoleto en el nivel API 35 y configurarlo no tendrá efecto. Puedes leer más sobre nuestras recomendaciones edge-to-edge aquí.
Parámetros:
| Name | Type | Description |
|---|---|---|
| color Required | string | Background color. |
| animated | boolean | Animate the style change. |
setBarStyle()
static setBarStyle(style: StatusBarStyle, animated?: boolean);
Establece el estilo de la barra de estado.
Parámetros:
| Name | Type | Description |
|---|---|---|
| style Required | StatusBarStyle | Status bar style to set. |
| animated | boolean | Animate the style change. |
setHidden()
static setHidden(hidden: boolean, animation?: StatusBarAnimation);
Muestra u oculta la barra de estado.
Parámetros:
| Name | Type | Description |
|---|---|---|
| hidden Required | boolean | Hide the status bar. |
| animation iOS | StatusBarAnimation | Animation when changing the status bar hidden property. |
🗑️ setNetworkActivityIndicatorVisible() iOS
El indicador de actividad de red en la barra de estado no es compatible en iOS 13 y versiones posteriores. Se eliminará en una futura versión.
static setNetworkActivityIndicatorVisible(visible: boolean);
Controla la visibilidad del indicador de actividad de red.
Parámetros:
| Name | Type | Description |
|---|---|---|
| visible Required | boolean | Show the indicator. |
setTranslucent() Android
static setTranslucent(translucent: boolean);
Controla la translucidez de la barra de estado.
Debido a la aplicación edge-to-edge introducida en Android 15, establecer la barra de estado como translúcida queda obsoleto en el nivel de API 35 y configurarlo no tendrá efecto. Puedes leer más sobre nuestras recomendaciones de edge-to-edge aquí.
Parámetros:
| Name | Type | Description |
|---|---|---|
| translucent Required | boolean | Set as translucent. |
Definiciones de tipos
StatusBarAnimation
Tipo de animación de la barra de estado para transiciones en iOS.
| Type |
|---|
| enum |
Constantes:
| Value | Type | Description |
|---|---|---|
'fade' | string | Fade animation |
'slide' | string | Slide animation |
'none' | string | No animation |
StatusBarStyle
Tipo de estilo de la barra de estado.
| Type |
|---|
| enum |
Constantes:
| Value | Type | Description |
|---|---|---|
'default' | string | Default status bar style (dark for iOS, light for Android) |
'light-content' | string | White texts and icons |
'dark-content' | string | Dark texts and icons (requires API>=23 on Android) |