React Native mobil rivojlanishda: bu nima, asosiy tushunchalar va qanday ishlaydi

Asoslar (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — UI ni tavsiflash uchun JavaScript sintaktik kengaytmasi. HTML kabi ko'rinadi, lekin React.createElement() orqali ishlaydi. JSX ifodalari: {variable}, {condition && <View />}, {array.map()}. Functional Component — JSX qaytaruvchi funksiya. Props-ni argument sifatida qabul qiladi. React ning zamonaviy standarti (React 16.8 dan oldin Class Components ishlatilgan). Hooklar — Functional Component dan holat va hayot siklini olish uchun funksiyalar. Hooklar qoidalari: faqat yuqori darajada, faqat Functional Components larda.

Hooklar Ma'lumotnomasi

useState — mahalliy holat. useEffect — yon ta'sirlar. useContext — Context ga kirish. useRef — o'zgartiriladigan havola. useCallback — funksiyani eslab qolish. useMemo — qiymatni eslab qolish. Custom Hooks — qayta ishlatiladigan mantiq: function useDebounce(value, delay).

// React Native da hooklar bilan Functional Component
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Hooklar (useState, useEffect, useRef, useCallback, useMemo)

useState — [value, setValue] qaytaradi. setValue — almashtiradi (Classdagi setState kabi birlashtirmaydi). Ob'ektlar uchun: setUser(prev => ({ ...prev, name: 'New' })). useEffect — renderdan keyin ishlaydi. Bog'liqlik massivi: [] — bir marta (mount), [dep] — dep o'zgarganda, undefined — har bir render. Tozalash funksiyasi — return () => {}. useContext — const value = useContext(MyContext). Daraxtda yuqorida Context.Provider talab qiladi.

useRef — renderlar orasida qiymatni saqlaydigan o'zgartiriladigan ob'ekt. .current — o'zgartirish. Foydalanish: mahalliy elementlarga kirish (ref={inputRef}), oldingi qiymatlarni saqlash, taymerlar. useCallback — eslab qolingan funksiyani qaytaradi. const handlePress = useCallback(() => {}, [dep]). useMemo — eslab qolingan qiymatni qaytaradi. const sorted = useMemo(() => data.sort(), [data]). Qimmat hisob-kitoblar uchun useMemo dan foydalaning.

useState — oddiy holat uchun. useEffect — API chaqiruvlari va obunalar uchun. useCallback/useMemo — optimallashtirish uchun. IT Sectr hamma narsani eslab qolishni tavsiya etmaydi — faqat haqiqiy ishlash muammolari bo'lganda.

Custom Hooks

Custom Hook — o'rnatilgan hooklardan foydalanadigan funksiya. Nomi use* bilan boshlanadi. Misollar: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks React Native da mantiqni qayta ishlatishning asosiy usulidir. IT Sectr biznes mantiqini Custom Hooks ga chiqarishni va komponentlarni toza saqlashni (faqat JSX + uslublar) tavsiya qiladi.

Komponentlar (View, Text, FlatList, ScrollView, SafeAreaView)

View — asosiy konteyner (div ga o'xshash). Text — matn (matn uchun yagona komponent). TextInput — matn kiritish. ScrollView — aylantiriladigan konteyner. FlatList — katta ma'lumotlar uchun virtual ro'yxat. SectionList — bo'limlar bilan FlatList. SafeAreaView — Safe Area dan avtomatik to'ldirish (notch, holat paneli). Pressable — TouchableOpacity ning zamonaviy o'rnini bosuvchi. useColorScheme — qorong'u/yorug' mavzuni aniqlash.

FlatList Optimallashtirish

FlatList — virtualizatsiya: faqat ko'rinadigan elementlar + windowSize render qilinadi. Optimallashtirish: 1) keyExtractor — noyob kalit, 2) getItemLayout — qat'iy balandlik (onLayout o'lchamini o'tkazib yuboradi), 3) renderItem uchun React.memo, 4) maxToRenderPerBatch (sukut bo'yicha 10), 5) windowSize (sukut bo'yicha 21), 6) removeClippedSubviews, 7) initialNumToRender.

React Native da Navigatsiya

React Navigation — standart navigatsiya steki. NativeStackNavigator — mahalliy animatsiya (push/pop). TabNavigator — pastki yorliqlar. DrawerNavigator — yon menyu. NavigationContainer — navigatsiyaning ildiz komponenti. Deep linking — tashqi havolalar uchun havola konfiguratsiyasi. Autentifikatsiya oqimi — shartli navigatsiya: isAuth ? AppStack : AuthStack. IT Sectr asosiy ekranlar uchun NativeStackNavigator va birinchi darajali navigatsiya uchun TabNavigator ni tavsiya qiladi.

Uslublar (StyleSheet)

StyleSheet.create() — uslublarni yaratish. Barcha xususiyatlar camelCase da: backgroundColor, fontSize, marginTop. Flexbox — sukut bo'yicha layout modeli (flexDirection: 'column'). CSS kaskadi yo'q, meros yo'q, selektorlar yo'q. Inline uslublar — ishlaydi, lekin tavsiya etilmaydi. StyleSheet.compose() — uslublarni birlashtirish. Platform.select — platformaga xos uslublar: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — xavfsiz maydon chekinishlarini boshqarish.

Styled Components va CSS-in-JS

Styled Components — React Native da CSS-in-JS uchun kutubxona. Restyle — mavzulashtirish + moslashuvchan uslublar. NativeWind — React Native uchun Tailwind CSS. Unistyles — atomik CSS bilan tezkor uslublar. Qorong'u rejim — useColorScheme + dinamik uslublar. IT Sectr soddalik uchun StyleSheet.create ni va dizayn tizimiga ega loyihalar uchun NativeWind ni tavsiya qiladi.

Animatsiya (Animated API)

Animated API — deklarativ animatsiya. Animated.Value — animatsiya qiymati. Animated.timing — oddiy animatsiya. Animated.spring — prujinali animatsiya. Animated.View — animatsiya qilinadigan View. useNativeDriver — mahalliy oqimda animatsiya (transform, opacity — qo'llab-quvvatlanadi). Animated.loop — sikl animatsiyasi. LayoutAnimation — layout o'zgarganda avtomatik animatsiya. reanimated 2/3 (kutubxona) — yuqori samaradorlikdagi muqobil. Metro Bundler — JavaScript paketlovchisi. JS + aktivlarni bitta paketga birlashtiradi. Fast Refresh (Hot Reload) ni qo'llab-quvvatlaydi. Hermes — mobil uchun optimallashtirilgan JS dvigateli: tezkor ishga tushish, kam xotira. RN 0.70+ dan sukut bo'yicha.

Gesture Handler va Animatsiyalar

React Native Gesture Handler — mahalliy jestlarni qayta ishlash. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — deklarativ jest API si. Reanimated + Gesture Handler — jestlar bilan 60fps animatsiyalar uchun kombinatsiya. react-native-skia — murakkab 2D grafikalar uchun GPU renderi. IT Sectr Animated API dan yuqori samaradorlikdagi barcha animatsiyalar uchun Reanimated 3 ni tavsiya qiladi.

Tarmoq (fetch, AsyncStorage, API)

fetch — o'rnatilgan HTTP mijozi. GET, POST, headers, body ni qo'llab-quvvatlaydi. Axios — interceptors bilan mashhur kutubxona. AsyncStorage — kalit-qiymat saqlash (UserDefaults ga o'xshash). MMKV — WeChat dan AsyncStorage ga tezkor muqobil. react-native-keychain — xavfsiz token saqlash. React Query (TanStack Query) — server holatini boshqarish: keshlash, qayta tekshirish, sahifalash. IT Sectr API so'rovlari uchun React Query ni va mahalliy saqlash uchun MMKV ni tavsiya qiladi.

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native Modules va Turbo Modules

Native Module — JS va mahalliy kod o'rtasidagi ko'prik (Android uchun Java/Kotlin, iOS uchun ObjC/Swift). JS dan mahalliy API larni chaqirishga imkon beradi. Turbo Modules (New Architecture) — eski Native Modules larning o'rnini bosuvchi. Sinxron chaqiruv, Codegen orqali tiplash, kam yuk. Fabric Renderer — sinxron layout bilan yangi renderer. JSI (JavaScript Interface) — ko'priksiz JS ning mahalliy ob'ektlarga to'g'ridan-to'g'ri kirishi. IT Sectr yangi loyihalar uchun Turbo Modules ni va mavjud loyihalar uchun Native Modules ni tavsiya qiladi.

// Android Mahalliy Moduli (Kotlin)
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

Test (Jest, React Native Testing Library)

Jest — standart test ishga tushiruvchi. describe/it/expect. React Native Testing Library — komponent testi. render, fireEvent, waitFor. screen.getByText, getByTestId — qidirish. userEvent — harakat simulyatsiyasi. Snapshot testlari — toMatchSnapshot(). MSW (Mock Service Worker) — API mocklash. Detox — RN uchun E2E testlar (grey-box, mahalliy). IT Sectr komponentlar uchun React Native Testing Library ni va oxirigacha stsenariylar uchun Detox ni tavsiya qiladi.

CodePush (App Center) — App Store/Google Play da chop etmasdan JS paketining OTA yangilanishlari. Foydalanish: tezkor tuzatishlar, A/B testlar, kontent o'zgarishlari. Cheklovlar: mahalliy kodni o'zgartira olmaydi. Alternativlar: EAS Update (Expo), react-native-update. IT Sectr shoshilinch tuzatishlar uchun CodePush ni va Expo loyihalari uchun EAS Update ni tavsiya qiladi.

Expo — React Native uchun freymvork. Boshqariladigan ish oqimi — barcha konfiguratsiyalar app.json orqali. Development builds — eject qilmasdan maxsus mahalliy modullar. Expo SDK — o'rnatilgan modullar: kamera, biometriya, bildirishnomalar. EAS Build — bulutli qurish. Expo Router — faylga asoslangan marshrutlash (Next.js ga o'xshash). IT Sectr yangi loyihalar uchun Expo ni va chuqur mahalliy sozlash talab qiladigan loyihalar uchun bare RN ni tavsiya qiladi.