Modal, Alert, ActivityIndicator, Switch

~12 daq · React Native · Asosiy komponentlar

Muammodan boshlaylik

Ilovada kichik, lekin har doim kerak bo'ladigan elementlar:

• "Rostdan ham o'chirmoqchimisiz?" — tasdiqlash oynasi
• Ma'lumot yuklanayotganda aylanuvchi belgi
• "Bildirishnomalar: yoq / o'chiq" — tumbler
• Ekran ustida ochiladigan oyna: filtr, tanlash

Bularning hammasi React Native da tayyor.

Alert — tizim dialogi

import { Alert } from 'react-native';

Alert.alert('Saqlandi', "O'zgarishlar muvaffaqiyatli saqlandi");

Tasdiqlash bilan:

function ochirishniSorash(id: number) {
  Alert.alert(
    "Buyurtmani o'chirish",
    "Rostdan ham o'chirmoqchimisiz? Bu amalni qaytarib bo'lmaydi.",
    [
      { text: 'Bekor qilish', style: 'cancel' },
      { text: "O'chirish", style: 'destructive', onPress: () => ochir(id) },
    ]
  );
}

• Tizimning native dialogi — har platformada o'ziga xos ko'rinish
• style: 'destructive' — iOS da qizil matn
• style: 'cancel' — iOS da qalin, Android da "orqaga" tugmasi bilan yopiladi
• Android da ko'pi bilan 3 ta tugma

Alert.alert — funksiya, komponent emas. Uni JSX ga yozmaysiz, hodisa ichida chaqirasiz.

[!INFO] Alert ni stillab bo'lmaydi. O'z dizayningizdagi dialog kerak bo'lsa — Modal bilan o'zingiz yasaysiz.

ActivityIndicator — yuklanish belgisi

import { ActivityIndicator, View } from 'react-native';

if (yuklanmoqda) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ActivityIndicator size="large" color="#0284c7" />
    </View>
  );
}

size: "small" yoki "large". Native spinner — har platformada tanish ko'rinishda.

Butun ekran uchun spinner o'rniga ko'pincha skeleton (kontentning kulrang "soyasi") yaxshiroq his beradi — 47-dars.

Switch — yoqish / o'chirish

import { Switch, View, Text } from 'react-native';

const [bildirishnoma, setBildirishnoma] = useState(true);

<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 16 }}>
  <Text style={{ fontSize: 16 }}>Bildirishnomalar</Text>
  <Switch
    value={bildirishnoma}
    onValueChange={setBildirishnoma}
    trackColor={{ false: '#cbd5e1', true: '#7dd3fc' }}
    thumbColor={bildirishnoma ? '#0284c7' : '#f1f5f9'}
  />
</View>

onValueChange — yangi qiymatni (true/false) beradi.

Modal — ekran ustidagi oyna

import { Modal, View, Text, Pressable, StyleSheet } from 'react-native';

export default function Ekran() {
  const [ochiq, setOchiq] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Pressable onPress={() => setOchiq(true)}>
        <Text>Filtrni ochish</Text>
      </Pressable>

      <Modal
        visible={ochiq}
        animationType="slide"
        transparent
        onRequestClose={() => setOchiq(false)}   // Android "orqaga" tugmasi
      >
        <Pressable style={styles.fon} onPress={() => setOchiq(false)}>
          <Pressable style={styles.oyna} onPress={() => {}}>
            <Text style={styles.sarlavha}>Filtr</Text>
            <Text>Bu yerda filtr sozlamalari...</Text>
            <Pressable style={styles.tugma} onPress={() => setOchiq(false)}>
              <Text style={{ color: 'white', fontWeight: '600' }}>Qo'llash</Text>
            </Pressable>
          </Pressable>
        </Pressable>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  fon: { flex: 1, backgroundColor: 'rgba(0,0,0,0.4)', justifyContent: 'flex-end' },
  oyna: {
    backgroundColor: 'white',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 24,
    gap: 12,
  },
  sarlavha: { fontSize: 20, fontWeight: '700' },
  tugma: { backgroundColor: '#0284c7', padding: 14, borderRadius: 12, alignItems: 'center', marginTop: 8 },
});

Bu — "bottom sheet": pastdan chiqadigan oyna, mobil ilovalarda juda keng tarqalgan.

Ikki qavat Pressable hiylasi: tashqi — xira fonni bosganda yopiladi. Ichki — onPress={() => {}} oynaning o'zini bosganda hodisani "ushlab qoladi", aks holda oyna ichini bosganda ham yopilib ketardi.

[!TIP] Murakkab bottom sheet lar (tortib yopish, bir nechta balandlik) uchun tayyor kutubxona: @gorhom/bottom-sheet. Expo Router da esa modal ni alohida ekran sifatida ochish ham mumkin (28-dars) — ko'pincha bu eng toza yo'l.

Toast — qisqa xabar

React Native da tayyor toast yo'q. Variantlar:

• Android: ToastAndroid.show("Saqlandi", ToastAndroid.SHORT) — faqat Android
• Ikkala platforma uchun: react-native-toast-message yoki burnt kutubxonalari

Nima uchun shunday?

Nima uchun Alert funksiya, Modal esa komponent?

Alert — operatsion tizimning o'z dialogi. React uni chizmaydi — u shunchaki tizimga "shu matnli dialogni ko'rsat" deb buyruq yuboradi. Shuning uchun uni istalgan joydan (hatto komponentdan tashqarida, API xatosida) chaqirish mumkin, lekin stillab bo'lmaydi. Modal esa React daraxtining bir qismi: uning ichida istalgan komponent, holat va stil bo'ladi. Oddiy savol — Alert, o'z dizayni va mantig'i bor oyna — Modal.

Xulosa

Eslab qoling:

• Alert.alert(sarlavha, matn, tugmalar) — native dialog; cancel, destructive
• ActivityIndicator — yuklanish belgisi, size="large"
• Switch — value + onValueChange
• Modal — visible, animationType, transparent, onRequestClose (majburiy)
• Bottom sheet: xira fon + pastda oyna; ikki qavat Pressable hiylasi
• Toast — tashqi kutubxona yoki ToastAndroid

Keyingi dars

12-dars: 1-2 bo'lim mashqlari — profil kartasi