Skip to content
Kezdőlap » StatusBar komponens

StatusBar komponens

A StatusBar a mobil eszközök fejlécében megjelenő kis sáv, ami egy sor értékes információt jelenít meg nekünk. Mutatja az időt, az akkumulátor töltöttséget, a szolgáltatót, annak állapotát, kapcsolati adatokat, frissítési jelzéseket, stb.

Expo és React Native StatusBar

Mondhatni a bőség zavara van, ugyanis a react-native csomag és az Expo is biztosít nekünk egy-egy StatusBar-t.

Ez az Expo-é:

import { StatusBar } from "expo-status-bar";

Ez pedig a React Native része:

import { StatusBar } from "react-native";

Ha mindkettőt használni akarjuk, akkor az Expo-s státuszsornak kell adni egy ún. alias nevet, magyarul egy becenevet:

import { StatusBar as ExpoStatusBar } from "expo-status-bar";

A Platform-ról szóló bejegyzésben feszegettem egy problémát, amit egy kicsit másképpen kell kezelni iOS és Android rendszeren. Olvasd el, hogy miről van szó :).

Ha megnézzük a React Native-os StatusBar doksiját, akkor látjuk, hogy van egy currentHeight tulajdonság, ami csak Android esetében használható. iOS esetén null értéke lesz.

Ezt tudjuk felhasználni ahelyett, hogy a marginTop-nak valamilyen fix értéket állítanánk be. A Platform-ra pedig akkor a továbbiakban emiatt itt nincsen szükség:

import { StatusBar } from "react-native";
// ...
<SafeAreaView style={{ flex: 1, marginTop: StatusBar.currentHeight }}>
//...
<ExpoStatusBar style="auto" />

Mivel a currentHeight iOS esetén nem játszik, a marginTop csak Android esetén kap értéket.

Dokumentációk

Összehasonlításként mellékelem az Expo és a React Native ide vonatkozó leírásait.

Címkék: