Стилізація залежно від платформи

React Native пропонує два способи впорядкувати код і розділити його стилізацію в залежності від платформами:

• Використання модуля платформи

• Використання розширень файлів для певної платформи

Модуль платформи

В React Native є модуль визначення платформи на якій запустився застосунок. Тому можна виконувати певні дії в залежності ос на якій працює програма. Цю можливість треба використовувати, коли необхідно написати специфічний для платформи код у частині компонента.

Platform.OS поверне 'ios' коли застосунок працює на iOS або 'android' коли на Android.

import { View, Text, StyleSheet, Platform } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello</Text>
    </View>
  );
}

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 35,
    backgroundColor: Platform.OS === "ios" ? "red" : "yellow",
  },
});

Також існує метод визначення платформи Platform.select. Він може мати такі значення 'ios' | 'android' | 'native' | 'default'. Відповідно, якщо запущено застосунок на iOS, Android. Якщо не визначено пристрій стиль застосується 'native'. І 'default', якщо, наприклад відкрили в браузері.

import { View, Text, StyleSheet, Platform } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 35,
    ...Platform.select({
      ios: {
        backgroundColor: "yellow",
      },
      android: {
        backgroundColor: "orange",
      },
      default: {
        // інша платформа, наприклад web
        backgroundColor: '#ff0000',
      },
    }),
  },
});

Спеціальні розширення платформи

Коли код застосунку стає складнішим, можна розділити компоненти для різних платформ з приставкою .ios. або .android. В такому разі автоматично завантажиться потрібний файл. Скажімо є два таких файли:

BigButton.ios.js
BigButton.android.js

Потім потрібно заімпортувати компонент:

import BigButton from './BigButton';

React Native автоматично підбере потрібний файл на основі запущеної платформи.

Посилання на офіційну документацію:

Стилізація компонентів в залежності від платформи