Platform — Android va iOS farqlari, soyalar

~12 daq · React Native · Stil va layout

Muammodan boshlaylik

Kartaga soya qo'shdingiz — iPhone da chiroyli. Android da — hech qanday soya yo'q. Yoki aksincha: Android da "orqaga" tugmasi bor, iPhone da yo'q — foydalanuvchi ekrandan qanday chiqadi?

Bitta kod, ikki platforma — lekin ular bir xil emas. Ba'zi joylarda farqni hisobga olish kerak.

Platform moduli

import { Platform } from 'react-native';

Platform.OS;          // 'ios' | 'android' | 'web'
Platform.Version;     // Android: API darajasi (34), iOS: '17.4'

if (Platform.OS === 'android') {
  // faqat Android uchun
}

Platform.select

const styles = StyleSheet.create({
  sarlavha: {
    fontSize: 18,
    ...Platform.select({
      ios: { fontWeight: '600' },
      android: { fontWeight: '700' },
    }),
  },
});

const matn = Platform.select({ ios: 'App Store da baholang', android: 'Google Play da baholang' });

Soyalar — eng katta farq

iOS — CSS ga o'xshash to'liq soya:

shadowColor: '#000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 12,

Android — elevation (Material Design "balandligi"):

elevation: 4,

Ikkalasi uchun:

const styles = StyleSheet.create({
  karta: {
    backgroundColor: 'white',      // ⚠️ fon majburiy — busiz soya ko'rinmaydi
    borderRadius: 12,
    padding: 16,
    ...Platform.select({
      ios: {
        shadowColor: '#0f172a',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.08,
        shadowRadius: 12,
      },
      android: {
        elevation: 3,
      },
    }),
  },
});

Zamonaviy usul: boxShadow

React Native ning yangi arxitekturasi (0.76+) CSS dagi kabi boxShadow ni qo'llab-quvvatlaydi — ikkala platformada bir xil:

karta: {
  backgroundColor: 'white',
  borderRadius: 12,
  boxShadow: '0 4px 12px rgba(15, 23, 42, 0.08)',
}

Loyihangiz yangi Expo SDK da bo'lsa — shu eng sodda yo'l. Eski versiyalarda — yuqoridagi Platform.select.

Platformaga xos fayllar

Komponent ikki platformada butunlay boshqacha bo'lsa — alohida fayllar:

components/
├── DatePicker.ios.tsx
└── DatePicker.android.tsx

import DatePicker from '@/components/DatePicker';   // Metro mos faylni o'zi tanlaydi

.web.tsx — veb uchun alohida variant.

Muhim platforma farqlari

Expo Router va React Navigation ko'pchilik farqlarni (sarlavha joyi, orqaga surish, animatsiyalar) avtomatik hal qiladi — siz faqat bitta kod yozasiz.

Android "orqaga" tugmasi

Modal yoki o'z oynangiz ochiq bo'lsa, "orqaga" tugmasi uni yopishi kerak:

import { BackHandler } from 'react-native';
import { useEffect } from 'react';

useEffect(() => {
  if (!ochiq) return;
  const sub = BackHandler.addEventListener('hardwareBackPress', () => {
    setOchiq(false);
    return true;          // true — hodisani "ushladik", ilova yopilmasin
  });
  return () => sub.remove();
}, [ochiq]);

Modal komponenti uchun bu onRequestClose orqali (11-dars).

Status bar

import { StatusBar } from 'expo-status-bar';

<StatusBar style="dark" />     // qora belgilar — och fon uchun
<StatusBar style="light" />    // oq belgilar — to'q fon uchun
<StatusBar style="auto" />     // qorong'i rejimga qarab

Soat, batareya belgilari fon rangiga mos bo'lsin. Har bir ekranda o'zgartirish mumkin.

Qachon farqlash kerak, qachon yo'q

Qoida: avval bitta kod yozing va ikkala platformada sinang. Farqni faqat quyidagi holatlarda qo'shing:

• Haqiqatan boshqacha ishlayotgan joylar (soya, klaviatura — 23-dars)
• Foydalanuvchi kutgan platforma odatlari (sana tanlash, ulashish oynasi)

Har bir elementni Platform.select ga o'rash — kodni ikki baravar murakkablashtiradi.

[!TIP] Ikkala platformada muntazam sinang. iPhone bo'lmasa — iOS da sinashni hamkasbingizdan so'rang yoki EAS orqali TestFlight build yuboring (50-dars). Ko'p xatolar faqat bitta platformada chiqadi.

Nima uchun shunday?

Nima uchun React Native farqlarni to'liq yashirmaydi — bitta kod hamma joyda bir xil ishlasa qulayroq emasmi?

Chunki foydalanuvchilar o'z platformasining odatlariga o'rgangan. iPhone egasi orqaga qaytish uchun ekran chetidan suradi; Android egasi — tizim tugmasini bosadi. Agar ilova ikkala platformada aynan bir xil ishlasa — u kamida bittasida "begona" bo'lib tuyuladi. React Native falsafasi — "bir marta o'rgan, hamma joyda yoz", "bir marta yoz, hamma joyda ishlat" emas: mantiq umumiy, tajriba — har platformaga mos.

Xulosa

Eslab qoling:

• Platform.OS — 'ios' / 'android'; Platform.select({ ios, android })
• Soya: iOS — shadow*, Android — elevation; fon rangi majburiy
• Yangi arxitekturada — boxShadow ikkala platformada
• .ios.tsx / .android.tsx — platformaga xos fayllar
• BackHandler — Android "orqaga" tugmasini ushlash
• expo-status-bar — status bar rangi
• Avval bitta kod; farqlarni faqat kerakli joyda qo'shing; ikkala platformada sinang

Keyingi dars

17-dars: Qorong'i rejim — useColorScheme, mavzu tizimi