A Platform egy olyan király cucc, amivel React Native használatával eszköz (platform) specifikus kódot írhatunk.
iOS és Android platform
Hogy egy kicsit érthetőbb legyen a dolog, vegyük alapul az iOS és az Android platformokat. Ezek ugyebár mobilokon / tableteken használt operációs rendszerek.
Az iPhone-ok, iPad-ek, MacBook-ok mind az iOS rendszert használják. Például egy Samsung teló viszont az Android rendszert.
Akárcsak a számítógépeknél használt Windows és Linux között, az iOS és Android között is rengeteg különbség van.
A React Native célja
Természetesen a React Native lényege éppen az, hogy ne kelljen foglalkoznunk a rendszerek közötti különbözőségekkel, és mindössze egyetlen kódbázisunk legyen. Vagyis egy kódhalmazt, programot csak egyszer kelljen megírni és az ugyanúgy muzsikáljon nekünk iPhone-on és Samsunhon is. Ne kelljen tehát külön iOS rendszerre és Androidra egy teljesen külön programot / mobilapplikációt készíteni.
Az örök „DE!”
Persze mindig van egy DE! A „de” itt azt jelenti, hogy mindig vannak és lesznek olyan dolgok, amikben az egyes rendszerek kissé eltérnek. Emiatt a React Native applikációnk kódján belül vizsgálni kell, hogy éppen melyik rendszerről van szó, és ettől függően egy hangyányit másképpen kell eljárnunk.
A mentőöv
A fentiek megoldására a Platform modul siet a segítségünkre. Ez a react-native csomagban van, tehát nem kell külön telepíteni, csupán importálni ahogy lentebb mutatom is.
Konkrét hasznát én akkor láttam először, amikor a SafeAreaView esetén előjött egy olyan probléma, hogy az csak iOS által támogatott.
A megoldás erre az, hogy mást használunk Androidnál. Erre jó tehát Platform, ami visszaadja, hogy milyen eszközön vagyunk.
import { Platform } from "react-native";
//...
const isAndroid = Platform.OS === "android";
Aztán a SafeAreaView-nak feltételesen adunk egy stílust, ami csak Android esetén lesz érvényes:
<SafeAreaView style={{ flex: 1, marginTop: isAndroid ? 50 : 0 }}>
Ezzel a megoldással csak egy baj van. Mégpedig az, hogy az egyes Android telók esetében eltérő lehet a státuszsor magassága.
És itt jön képbe egy másik jó kis csomag, amit be akarok mutatni. Ez pedig a StatusBar.
Platform.select metódus
A csomagnak van egy select metódusa is, amit egy olyan objektumot kap, aminek négy lehetséges kulcsa van:
- ios
- android
- native
- default
Ennek felhasználásával is szépen el lehet különíteni az egyes rendszereken alkalmazott stílusokat:
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
...Platform.select({
ios: {
backgroundColor: 'red'
},
android: {
backgroundColor: 'green'
},
default: {
// egyéb esetekben, például weboldalnál
backgroundColor: 'blue'
}
})
}
});
Dokumentáció
Egyéb felhasználási ötletekért nézd meg a hivatalos leírást.