React Native в мобилното разработване: какво е, ключови понятия и как работи

Основи (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — синтактично разширение на JavaScript за описване на UI. Изглежда като HTML, но работи чрез React.createElement(). JSX изрази: {variable}, {condition && <View />}, {array.map()}. Functional Component — функция, която връща JSX. Приема props като аргумент. Модерен стандарт на React (преди React 16.8 се използваха Class Components). Хукове — функции за достъп до състояние и жизнен цикъл от Functional Component. Правила за хуковете: само на най-горното ниво, само във Functional Components.

Справка за хукове

useState — локално състояние. useEffect — странични ефекти. useContext — достъп до Context. useRef — променяема референция. useCallback — мемоизация на функция. useMemo — мемоизация на стойност. Custom Hooks — преизползваема логика: function useDebounce(value, delay).

// Functional Component с хукове в React Native
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>
  );
}

Хукове (useState, useEffect, useRef, useCallback, useMemo)

useState — връща [value, setValue]. setValue — замества (не слива като setState в Class). За обекти: setUser(prev => ({ ...prev, name: 'New' })). useEffect — се изпълнява след рендиране. Масив от зависимости: [] — веднъж (монтиране), [dep] — когато dep се промени, undefined — всяко рендиране. Функция за почистване — return () => {}. useContext — const value = useContext(MyContext). Изисква Context.Provider по-нагоре в дървото.

useRef — променяем обект, който запазва стойността между рендиранията. .current — мутация. Използва се за: достъп до native елементи (ref={inputRef}), съхраняване на предишни стойности, таймери. useCallback — връща мемоизирана функция. const handlePress = useCallback(() => {}, [dep]). useMemo — връща мемоизирана стойност. const sorted = useMemo(() => data.sort(), [data]). Използвайте useMemo за скъпоструващи изчисления.

useState — за просто състояние. useEffect — за API извиквания и абонаменти. useCallback/useMemo — за оптимизация. IT Sectr препоръчва да не мемоизирате всичко — само когато има реални проблеми с производителността.

Custom Hooks

Custom Hook — функция, която използва вградени хукове. Името започва с use*. Примери: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks са основният начин за преизползване на логика в React Native. IT Sectr препоръчва да изнасяте бизнес логиката в Custom Hooks и да поддържате компонентите чисти (само JSX + стилове).

Компоненти (View, Text, FlatList, ScrollView, SafeAreaView)

View — основен контейнер (аналогичен на div). Text — текст (единствен компонент за текст). TextInput — въвеждане на текст. ScrollView — контейнер с възможност за превъртане. FlatList — виртуализиран списък за големи данни. SectionList — FlatList с секции. SafeAreaView — автоматично запълване от Safe Area (изрез, лента за състояние). Pressable — модерен заместител на TouchableOpacity. useColorScheme — откриване на тъмна/светла тема.

Оптимизация на FlatList

FlatList — виртуализация: само видимите елементи + windowSize се рендират. Оптимизация: 1) keyExtractor — уникален ключ, 2) getItemLayout — фиксирана височина (пропуска измерване onLayout), 3) React.memo за renderItem, 4) maxToRenderPerBatch (по подразбиране 10), 5) windowSize (по подразбиране 21), 6) removeClippedSubviews, 7) initialNumToRender.

Навигация в React Native

React Navigation — стандартен навигационен стек. NativeStackNavigator — native анимация (push/pop). TabNavigator — долни табове. DrawerNavigator — странично меню. NavigationContainer — коренов компонент за навигация. Deep linking — конфигурация на връзки за външни линкове. Поток за удостоверяване — условна навигация: isAuth ? AppStack : AuthStack. IT Sectr препоръчва NativeStackNavigator за основни екрани и TabNavigator за навигация от първо ниво.

Стилове (StyleSheet)

StyleSheet.create() — създаване на стилове. Всички свойства в camelCase: backgroundColor, fontSize, marginTop. Flexbox — модел на оформление по подразбиране (flexDirection: 'column'). Без CSS каскада, без наследяване, без селектори. Inline стилове — работят, но не се препоръчват. StyleSheet.compose() — комбиниране на стилове. Platform.select — стилове за конкретна платформа: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — управление на вложките за безопасна зона.

Styled Components и CSS-in-JS

Styled Components — библиотека за CSS-in-JS в React Native. Restyle — тематизиране + отзивчиви стилове. NativeWind — Tailwind CSS за React Native. Unistyles — бързи стилове с атомарен CSS. Тъмен режим — useColorScheme + динамични стилове. IT Sectr препоръчва StyleSheet.create за простота и NativeWind за проекти с дизайн система.

Анимация (Animated API)

Animated API — декларативна анимация. Animated.Value — стойност на анимация. Animated.timing — проста анимация. Animated.spring — пружинна анимация. Animated.View — View, което може да се анимира. useNativeDriver — анимация в native нишка (transform, opacity — поддържани). Animated.loop — циклична анимация. LayoutAnimation — автоматична анимация при промяна на оформлението. reanimated 2/3 (библиотека) — алтернатива с по-висока производителност. Metro Bundler — JavaScript пакетиращ инструмент. Пакетира JS + активи в един пакет. Поддържа Fast Refresh (Hot Reload). Hermes — JS двигател, оптимизиран за мобилни устройства: бърз старт, по-малко памет. По подразбиране от RN 0.70+.

Gesture Handler и анимации

React Native Gesture Handler — native обработка на жестове. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — декларативен API за жестове. Reanimated + Gesture Handler — комбинация за 60fps анимации с жестове. react-native-skia — GPU рендиране за сложна 2D графика. IT Sectr препоръчва Reanimated 3 за всички анимации с по-висока производителност от Animated API.

Мрежа (fetch, AsyncStorage, API)

fetch — вграден HTTP клиент. Поддържа GET, POST, headers, body. Axios — популярна библиотека с интерцептори. AsyncStorage — хранилище ключ-стойност (подобно на UserDefaults). MMKV — бърза алтернатива на AsyncStorage от WeChat. react-native-keychain — сигурно съхранение на токени. React Query (TanStack Query) — управление на сървърно състояние: кеширане, повторно валидиране, пагинация. IT Sectr препоръчва React Query за API заявки и MMKV за локално съхранение.

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 и Turbo Modules

Native Module — мост между JS и native код (Java/Kotlin за Android, ObjC/Swift за iOS). Позволява извикване на native API от JS. Turbo Modules (New Architecture) — замяна на старите Native Modules. Синхронно извикване, типизиране чрез Codegen, по-малко overhead. Fabric Renderer — нов рендиращ инструмент със синхронно оформление. JSI (JavaScript Interface) — директен достъп на JS до native обекти без мост. IT Sectr препоръчва Turbo Modules за нови проекти и Native Modules за съществуващи.

// Native модул за Android (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)
    }
}

Тестване (Jest, React Native Testing Library)

Jest — стандартен тест runner. describe/it/expect. React Native Testing Library — тестване на компоненти. render, fireEvent, waitFor. screen.getByText, getByTestId — търсене. userEvent — симулация на действия. Snapshot тестове — toMatchSnapshot(). MSW (Mock Service Worker) — имитиране на API. Detox — E2E тестове за RN (grey-box, native). IT Sectr препоръчва React Native Testing Library за компоненти и Detox за сценарии от край до край.

CodePush (App Center) — OTA актуализации на JS пакет без публикуване в App Store/Google Play. Използва се за: бързи поправки, A/B тестове, промени в съдържанието. Ограничения: не може да променя native код. Алтернативи: EAS Update (Expo), react-native-update. IT Sectr препоръчва CodePush за спешни поправки и EAS Update за Expo проекти.

Expo — рамка за React Native. Управляван работен поток — всички конфигурации чрез app.json. Development builds — персонализирани native модули без eject. Expo SDK — вградени модули: камера, биометрия, известия. EAS Build — облачно компилиране. Expo Router — маршрутизация на база файлове (подобно на Next.js). IT Sectr препоръчва Expo за нови проекти и bare RN за проекти с дълбоко native персонализиране.