Platform

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.