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.