Haptics, Share, Clipboard, Linking

~10 daq · React Native · Qurilma imkoniyatlari

Muammodan boshlaylik

Kichik imkoniyatlar — lekin ular ilovani "native" his qildiradi:

• Tugma bosilganda yengil tebranish — "bosildi" ni barmoq bilan his qilish
• "Ulashish" — mahsulot havolasini Telegram ga yuborish
• Promokodni bir teginishda nusxalash
• Telefon raqamini bosish — qo'ng'iroq; manzilni bosish — xarita

Har biri bir necha qator kod.

Haptics — tebranish

npx expo install expo-haptics

import * as Haptics from 'expo-haptics';

Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);       // yengil — tugma, tanlov
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);      // o'rtacha
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);       // kuchli

Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);   // muvaffaqiyat
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);     // xato

Haptics.selectionAsync();    // juda yengil — slider, picker da qiymat o'zgarishi

Qayerda ishlatish:

[!TIP] Kamroq — yaxshiroq. Har bir bosishda tebranish bezovta qiladi va o'z ma'nosini yo'qotadi. Muhim lahzalar uchun saqlang. iOS da haptik dvigatel aniqroq; ko'p Android telefonlarida ham yaxshi ishlaydi, lekin ba'zilarida sezilmaydi.

<Pressable onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); qosh(m); }}>

Share — ulashish

O'rnatilgan Share — tizimning ulashish oynasi:

import { Share } from 'react-native';

async function ulashish(m: Mahsulot) {
  try {
    await Share.share({
      message: `${m.nom} — ${m.narx.toLocaleString()} so'm\nhttps://dokon.uz/mahsulot/${m.id}`,
      url: `https://dokon.uz/mahsulot/${m.id}`,       // iOS: alohida havola
      title: m.nom,                                   // Android: oyna sarlavhasi
    });
  } catch (e) {
    Alert.alert("Ulashib bo'lmadi");
  }
}

Foydalanuvchi Telegram, WhatsApp, SMS, Instagram — telefondagi istalgan ilovani tanlaydi. Havola — universal link (29-dars) bo'lsa, do'stida ilova o'rnatilgan bo'lsa, ilovada ochiladi.

Fayl ulashish

Rasm yoki PDF ni ulashish uchun — expo-sharing:

npx expo install expo-sharing

import * as Sharing from 'expo-sharing';

if (await Sharing.isAvailableAsync()) {
  await Sharing.shareAsync(pdfUri, { mimeType: 'application/pdf', dialogTitle: 'Chekni ulashish' });
}

Chek, hisobot, QR kod rasmini yuborish.

Clipboard — nusxalash

npx expo install expo-clipboard

import * as Clipboard from 'expo-clipboard';

async function nusxala(kod: string) {
  await Clipboard.setStringAsync(kod);
  Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
  setNusxalandi(true);
  setTimeout(() => setNusxalandi(false), 2000);
}

<Pressable onPress={() => nusxala('YOZ2026')} style={styles.promo}>
  <Text style={styles.kod}>YOZ2026</Text>
  <Ionicons name={nusxalandi ? 'checkmark' : 'copy-outline'} size={18} />
</Pressable>

O'qish:

const matn = await Clipboard.getStringAsync();

[!INFO] iOS clipboard ni o'qiganda foydalanuvchiga "Ilova joylashtirdi" xabarini ko'rsatadi. Clipboard ni faqat foydalanuvchi aniq so'raganda o'qing ("Joylashtirish" tugmasi) — ilova ochilganda avtomatik emas.

Linking — boshqa ilovalarni ochish

import { Linking } from 'react-native';

Linking.openURL('tel:+998901112233');                        // qo'ng'iroq
Linking.openURL('sms:+998901112233?body=Salom');             // SMS
Linking.openURL('mailto:yordam@dokon.uz?subject=Savol');     // email
Linking.openURL('https://dokon.uz');                         // brauzer
Linking.openURL('https://t.me/dokon_uz');                    // Telegram (o'rnatilgan bo'lsa — ilovada)
Linking.openSettings();                                      // ilova sozlamalari (38-dars)

Xaritada ochish

function xaritadaOch(lat: number, lng: number, nom: string) {
  const url = Platform.select({
    ios: `maps:0,0?q=${encodeURIComponent(nom)}@${lat},${lng}`,
    android: `geo:0,0?q=${lat},${lng}(${encodeURIComponent(nom)})`,
  })!;
  Linking.openURL(url);
}

iOS — Apple Maps, Android — Google Maps yoki foydalanuvchi tanlagan xarita ilovasi.

Ilova ichidagi brauzer

Foydalanish shartlari, yordam sahifalari — ilovadan chiqmasdan:

npx expo install expo-web-browser

import * as WebBrowser from 'expo-web-browser';

await WebBrowser.openBrowserAsync('https://dokon.uz/shartlar');

Tizim brauzeri (iOS — Safari View, Android — Chrome Custom Tabs) ilova ustida ochiladi; yopilganda foydalanuvchi aynan qolgan joyiga qaytadi. OAuth (Google bilan kirish) ham shu orqali.

Ochib bo'ladimi?

const mumkin = await Linking.canOpenURL('tg://resolve?domain=dokon_uz');

iOS da tekshiriladigan sxemalar app.json da e'lon qilinishi kerak (ios.infoPlist.LSApplicationQueriesSchemes). Odatda shunchaki openURL ni try/catch bilan chaqirish soddaroq.

Hammasi birga — mahsulot ekranidagi amallar

<View style={{ flexDirection: 'row', justifyContent: 'space-around', padding: 16 }}>
  <Amal ikonka="share-outline" matn="Ulashish" onPress={() => ulashish(m)} />
  <Amal ikonka="call-outline" matn="Qo'ng'iroq" onPress={() => Linking.openURL(`tel:${dokon.telefon}`)} />
  <Amal ikonka="navigate-outline" matn="Yo'l" onPress={() => xaritadaOch(dokon.lat, dokon.lng, dokon.nom)} />
  <Amal ikonka="logo-whatsapp" matn="WhatsApp" onPress={() => Linking.openURL(`https://wa.me/${dokon.telefon.replace('+', '')}`)} />
</View>

Nima uchun shunday?

Nima uchun ilova o'zi ulashish yoki qo'ng'iroq oynasini yasamaydi — tizimga topshiradi?

Chunki tizim foydalanuvchini siz bilmaydigan narsalar haqida biladi: qaysi messenjerlar o'rnatilgan, kimga tez-tez yozadi, qaysi SIM kartadan qo'ng'iroq qilishni afzal ko'radi, qaysi xarita ilovasini ishlatadi. Tizim oynasi — har doim foydalanuvchiga tanish va eng to'liq. Ilovaning vazifasi — "nima" ni aytish (shu havolani ulash, shu raqamga qo'ng'iroq), "qanday" esa operatsion tizimning ishi.

Xulosa

Eslab qoling:

• expo-haptics: impactAsync, notificationAsync, selectionAsync — muhim lahzalarda, kam
• Share.share({ message, url }) — matn va havola; fayllar — expo-sharing
• expo-clipboard: setStringAsync + tasdiq; o'qish — faqat so'ralganda
• Linking.openURL: tel:, sms:, mailto:, https:, xarita sxemalari
• expo-web-browser — ilova ichidagi brauzer, OAuth
• Tizim oynalariga topshiring — ular foydalanuvchiga tanish

Keyingi dars

44-dars: Animated API — asoslar