Kod specyficzny dla platformy

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Podczas tworzenia aplikacji wieloplatformowej warto ponownie wykorzystać jak najwięcej kodu. Mogą jednak wystąpić sytuacje, w których uzasadnione jest użycie różnych implementacji – na przykład gdy potrzebujesz osobnych komponentów wizualnych dla Androida i iOS.

React Native oferuje dwa sposoby organizacji kodu z podziałem na platformy:

• Korzystanie z modułu Platform

• Używanie rozszerzeń plików specyficznych dla platformy

Niektóre komponenty mają właściwości działające tylko na jednej platformie. Takie propsy są oznaczone adnotacją @platform i mają specjalną ikonę na stronie dokumentacji.

Moduł Platform

React Native dostarcza moduł wykrywający platformę, na której działa aplikacja. Możesz użyć tej detekcji do implementacji kodu specyficznego dla platformy. Wybierz tę opcję, gdy tylko niewielkie fragmenty komponentu wymagają platformowej specjalizacji.

tsx

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100,
});

Platform.OS przyjmie wartość ios na iOS i android na Androidzie.

Dostępna jest również metoda Platform.select, która przyjmuje obiekt z kluczami 'ios' | 'android' | 'native' | 'default' i zwraca wartość najbardziej pasującą do bieżącej platformy. Na urządzeniach mobilnych pierwszeństwo mają klucze ios i android. Jeśli nie są zdefiniowane, używany jest klucz native, a następnie default.

tsx

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'green',
      },
      default: {
        // other platforms, web for example
        backgroundColor: 'blue',
      },
    }),
  },
});

Rezultatem będzie kontener z flex: 1 na wszystkich platformach, czerwonym tłem na iOS, zielonym na Androidzie i niebieskim na innych platformach.

Ponieważ metoda akceptuje any wartość, możesz jej użyć do zwracania komponentów specyficznych dla platformy:

tsx

const Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();

<Component />;

tsx

const Component = Platform.select({
  native: () => require('ComponentForNative'),
  default: () => require('ComponentForWeb'),
})();

<Component />;

Detecting the Android version

Android

Na Androidzie moduł Platform może również wykrywać wersję platformy, na której działa aplikacja:

tsx

import {Platform} from 'react-native';

if (Platform.Version === 25) {
  console.log('Running on Nougat!');
}

Uwaga: Version odpowiada wersji API Androida, a nie wersji systemu operacyjnego. Mapowanie znajdziesz w historii wersji Androida.

Detecting the iOS version

iOS

Na iOS Version pochodzi z -[UIDevice systemVersion] i jest ciągiem znaków reprezentującym aktualną wersję systemu (np. "10.3"). Aby wykryć główny numer wersji na iOS:

tsx

import {Platform} from 'react-native';

const majorVersionIOS = parseInt(Platform.Version, 10);
if (majorVersionIOS <= 9) {
  console.log('Work around a change in behavior');
}

Rozszerzenia specyficzne dla platformy

Gdy kod specyficzny dla platformy jest bardziej złożony, warto rozdzielić go na osobne pliki. React Native automatycznie wykrywa pliki z rozszerzeniami .ios. lub .android. i ładuje odpowiedni plik platformy podczas importu przez inne komponenty.

Przykładowa struktura plików:

shell

BigButton.ios.js
BigButton.android.js

Komponent importujesz następująco:

tsx

import BigButton from './BigButton';

Komponent importujesz następująco:

Rozszerzenia specyficzne dla środowisk natywnych (współdzielenie kodu z NodeJS i Webem)

Rozszerzenie .native.js stosuj, gdy moduł ma być współdzielony między NodeJS/Webem a React Native bez różnic na poziomie Android/iOS. Szczególnie przydatne w projektach łączących React Native z ReactJS.

Przykładowa struktura plików:

shell

Container.js # picked up by webpack, Rollup or any other Web bundler
Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro)

Nadal możesz go zaimportować bez rozszerzenia .native w następujący sposób:

tsx

import Container from './Container';

Ekspert radzi: Skonfiguruj bundler webowy, by ignorował rozszerzenia .native.js. Dzięki temu unikniesz nieużywanego kodu w pakiecie produkcyjnym i zmniejszysz jego końcowy rozmiar.