20 популярных вопросов на собеседовании по React Native

Почему эти вопросы важны?

Подготовка к собеседованию по React Native требует глубокого понимания:

• 🧠 Основных концепций React и их адаптации для мобильной разработки
• ⚡ Особенностей нативного рендеринга и управления производительностью
• 🔄 Жизненного цикла приложения и его компонентов
• 🔍 Навигации и состояния в мобильных приложениях
• 💼 Практических аспектов публикации приложений в App Store и Google Play

Грамотные ответы на эти вопросы демонстрируют вашу компетенцию и готовность к реальным проектам.

Основные вопросы и ответы

1. Что такое React Native и чем он отличается от React?

React Native — это фреймворк для разработки мобильных приложений с использованием JavaScript и React. Ключевое отличие от React (используемого для веб-разработки) состоит в том, что React Native компилирует JavaScript-код в нативные компоненты для iOS и Android.

// React (веб):
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => <h1>Привет, мир!</h1>;
ReactDOM.render(<App />, document.getElementById('root'));

// React Native (мобильные приложения):
import React from 'react';
import { Text, View } from 'react-native';

const App = () => (
  <View>
    <Text>Привет, мир!</Text>
  </View>
);
export default App;

Основные отличия:

✅ React Native рендерит нативные компоненты, а не DOM-элементы ✅ Вместо HTML используются специальные компоненты (View, Text, Image) ✅ Стилизация через JavaScript объекты, а не CSS ✅ Доступ к нативным API устройства (камера, геолокация, акселерометр)

2. Что такое мост (Bridge) в React Native и как он работает?

Мост (Bridge) — это ключевой архитектурный элемент React Native, обеспечивающий коммуникацию между JavaScript-кодом и нативными модулями.

JavaScript-поток <---> Мост (Bridge) <---> Нативный поток (iOS/Android)

Принцип работы моста:

1. JavaScript-код выполняется в отдельном потоке (JS-поток)
2. Взаимодействия с нативными компонентами (нажатия, анимации) обрабатываются через мост
3. Сериализованные данные передаются асинхронно между потоками
4. Нативный код преобразует инструкции в реальные нативные компоненты UI

Важно: Частые переходы через мост могут вызывать проблемы с производительностью, особенно при анимациях и в сложных списках.

3. Что такое новая архитектура React Native и в чём её преимущества?

Новая архитектура React Native (также известная как React Native Fabric или New Architecture) решает ограничения старой архитектуры с мостом.

Ключевые компоненты:

1. JSI (JavaScript Interface) — прямое взаимодействие между JavaScript и нативным кодом без сериализации
2. Fabric — новый рендерер UI, оптимизирующий обновления экрана
3. TurboModules — улучшенные нативные модули с ленивой загрузкой
4. Codegen — автоматическое создание типобезопасных мостов между JS и нативным кодом

Преимущества:

✅ Повышение производительности (до 2-3 раз быстрее)

✅ Улучшенная поддержка многопоточности

✅ Более плавные анимации и жесты

✅ Уменьшение размера приложения

✅ Лучшая интеграция с нативными API

Пройди собеседование в топ-компанию

Платформа для подготовки

Решай алгоритмические задачи как профи

✓ Популярные алгоритмы✓ Разбор решений✓ AI помощь

Начать сейчас→

4. Как работает навигация в React Native?

Навигация в React Native обычно реализуется с помощью специальных библиотек, самой популярной из которых является React Navigation.

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Популярные типы навигации:

1. Stack-навигация — экраны накладываются друг на друга с анимацией
2. Tab-навигация — переключение между вкладками
3. Drawer-навигация — боковое меню, выдвигаемое свайпом
4. Bottom Tab — нижняя панель вкладок (как в Instagram)
5. Material Top Tabs — верхние вкладки с возможностью свайпа

Функциональные возможности:

• Передача параметров между экранами
• Вложенная навигация
• Управление историей переходов
• Настройка анимаций переходов

5. Какие методы жизненного цикла используются в React Native?

Жизненный цикл компонентов в React Native аналогичен React, но имеет некоторые особенности для мобильных приложений.

Классовые компоненты:

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    // Инициализация состояния
  }

  componentDidMount() {
    // Выполняется после монтирования компонента
    // Хорошее место для API-запросов, подписок и т.д.
  }

  componentDidUpdate(prevProps, prevState) {
    // Выполняется после обновления компонента
  }

  componentWillUnmount() {
    // Выполняется перед удалением компонента
    // Хорошее место для очистки ресурсов
  }

  render() {
    return <View><Text>Пример компонента</Text></View>;
  }
}

Функциональные компоненты с хуками:

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [data, setData] = useState(null);

  // componentDidMount + componentDidUpdate
  useEffect(() => {
    // API-запросы, подписки
    return () => {
      // Очистка (componentWillUnmount)
    };
  }, [/* зависимости */]);

  return <View><Text>Пример функционального компонента</Text></View>;
}

Специфичные для мобильных приложений события жизненного цикла:

• AppState для отслеживания состояния приложения (активно/в фоне)
• Linking для обработки deep links
• BackHandler для управления кнопкой "назад" на Android

6. Как оптимизировать производительность React Native приложений?

Оптимизация React Native приложений требует понимания как JavaScript, так и нативной части.

Ключевые стратегии оптимизации:

1. Минимизация переходов через мост:

   // Плохо: множественные вызовы через мост
   items.forEach(item => updateNativeView(item));
   
   // Хорошо: один вызов с пакетом данных
   updateNativeViewsBatch(items);

2. Оптимизация списков:

   // Используйте FlatList вместо ScrollView + map
   <FlatList
     data={items}
     renderItem={({item}) => <ItemComponent data={item} />}
     keyExtractor={item => item.id}
     initialNumToRender={10}
     maxToRenderPerBatch={5}
     windowSize={5}
   />

3. Мемоизация компонентов:

   // Используйте React.memo для предотвращения лишних ререндеров
   const MemoizedComponent = React.memo(ExpensiveComponent);

4. Отложенная загрузка:

   // Загружать тяжелые компоненты только при необходимости
   const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

5. Оптимизация изображений:

   • Используйте правильные форматы и размеры
   • Применяйте кэширование изображений
   • Рассмотрите прогрессивную загрузку

6. Отладка с использованием специализированных инструментов:

   • React DevTools
   • Flipper
   • Hermes Engine Debugger

7. Что такое Hermes и когда его следует использовать?

Hermes — это движок JavaScript с открытым исходным кодом, оптимизированный для запуска React Native на Android (начиная с версии 0.64, также доступен для iOS).

Преимущества Hermes:

1. Уменьшенный размер приложения — до 30% меньше APK
2. Сокращенное время запуска — приложение запускается быстрее
3. Снижение использования памяти — оптимизированная работа с памятью
4. Улучшенная производительность на устройствах среднего и низкого класса

Включение Hermes:

// android/app/build.gradle
def enableHermes = project.ext.react.get("enableHermes", true); // Установите true

// ios/Podfile
use_react_native!(
  :path => config[:reactNativePath],
  :hermes_enabled => true # Установите true
)

Ограничения Hermes:

• Ограниченная поддержка некоторых функций JavaScript (например, eval)
• Некоторые сторонние библиотеки могут быть несовместимы
• Отладка требует специальных инструментов (Hermes Debugger)

8. Как реализуется управление состоянием в React Native приложениях?

React Native предлагает несколько подходов к управлению состоянием, от простых до продвинутых.

Локальное состояние:

// Классовый компонент
class Counter extends React.Component {
  state = { count: 0 };
  
  increment = () => this.setState(state => ({ count: state.count + 1 }));
  
  render() {
    return (
      <View>
        <Text>Счетчик: {this.state.count}</Text>
        <Button title="Увеличить" onPress={this.increment} />
      </View>
    );
  }
}

// Функциональный компонент с хуками
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <View>
      <Text>Счетчик: {count}</Text>
      <Button title="Увеличить" onPress={() => setCount(count + 1)} />
    </View>
  );
}

Глобальное состояние:

1. Context API:

const CounterContext = React.createContext();

function CounterProvider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CounterContext.Provider value={{ count, setCount }}>
      {children}
    </CounterContext.Provider>
  );
}

function CounterDisplay() {
  const { count } = useContext(CounterContext);
  return <Text>Счетчик: {count}</Text>;
}

function CounterButton() {
  const { count, setCount } = useContext(CounterContext);
  return <Button title="+" onPress={() => setCount(count + 1)} />;
}

1. Redux:

// actions.js
export const increment = () => ({ type: 'INCREMENT' });

// reducer.js
const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

// Component
function CounterComponent({ count, increment }) {
  return (
    <View>
      <Text>Счетчик: {count}</Text>
      <Button title="+" onPress={increment} />
    </View>
  );
}

export default connect(
  state => ({ count: state.count }),
  { increment }
)(CounterComponent);

1. MobX:

// store.js
import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;
  
  constructor() {
    makeAutoObservable(this);
  }
  
  increment() {
    this.count += 1;
  }
}

// Component
import { observer } from 'mobx-react';

const CounterComponent = observer(({ store }) => (
  <View>
    <Text>Счетчик: {store.count}</Text>
    <Button title="+" onPress={() => store.increment()} />
  </View>
));

Рекомендации по выбору:

• Для простых приложений — useState и Context API
• Для средних и сложных — Redux или MobX
• Рассмотрите Recoil или Jotai для более современного атомарного подхода

9. Как работать с анимациями в React Native?

React Native предлагает две основные системы для создания анимаций.

1. Animated API:

import { Animated, Easing } from 'react-native';

function FadeInView({ children }) {
  const opacity = useRef(new Animated.Value(0)).current;
  
  useEffect(() => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 1000,
      easing: Easing.ease,
      useNativeDriver: true, // Важно для производительности
    }).start();
  }, []);
  
  return (
    <Animated.View style={{ opacity }}>
      {children}
    </Animated.View>
  );
}

2. LayoutAnimation:

import { LayoutAnimation, UIManager, Platform } from 'react-native';

// Включение для Android
if (Platform.OS === 'android') {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

function ExpandableComponent() {
  const [expanded, setExpanded] = useState(false);
  
  const toggleExpand = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    setExpanded(!expanded);
  };
  
  return (
    <View>
      <TouchableOpacity onPress={toggleExpand}>
        <Text>Развернуть/Свернуть</Text>
      </TouchableOpacity>
      {expanded && <View style={{ height: 200 }}><Text>Дополнительный контент</Text></View>}
    </View>
  );
}

3. Reanimated (сторонняя библиотека):

import Animated, { 
  useSharedValue, 
  withSpring, 
  useAnimatedStyle 
} from 'react-native-reanimated';

function AnimatedButton() {
  const scale = useSharedValue(1);
  
  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: scale.value }]
    };
  });
  
  const onPressIn = () => {
    scale.value = withSpring(1.2);
  };
  
  const onPressOut = () => {
    scale.value = withSpring(1);
  };
  
  return (
    <TouchableWithoutFeedback onPressIn={onPressIn} onPressOut={onPressOut}>
      <Animated.View style={[styles.button, animatedStyle]}>
        <Text>Нажми меня</Text>
      </Animated.View>
    </TouchableWithoutFeedback>
  );
}

Ключевые советы для эффективных анимаций:

• Всегда используйте useNativeDriver: true когда это возможно
• Анимируйте только свойства, которые могут быть ускорены (transform, opacity)
• Избегайте анимации layout properties (width, height, margin) с useNativeDriver
• Для сложных анимаций рассмотрите Reanimated 2

10. Как обрабатывать жесты в React Native?

React Native предоставляет несколько способов для обработки пользовательских жестов.

1. Базовые компоненты для обработки касаний:

import { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback } from 'react-native';

function TouchableExample() {
  return (
    <View>
      <TouchableOpacity onPress={() => console.log('Нажатие')}>
        <Text>Нажми с эффектом прозрачности</Text>
      </TouchableOpacity>
      
      <TouchableHighlight 
        onPress={() => console.log('Нажатие')}
        onLongPress={() => console.log('Долгое нажатие')}
        underlayColor="#DDDDDD"
      >
        <Text>Нажми с подсветкой</Text>
      </TouchableHighlight>
      
      <TouchableWithoutFeedback 
        onPressIn={() => console.log('Начало нажатия')}
        onPressOut={() => console.log('Конец нажатия')}
      >
        <Text>Нажми без визуального эффекта</Text>
      </TouchableWithoutFeedback>
    </View>
  );
}

2. PanResponder для сложных жестов:

import { PanResponder, Animated } from 'react-native';

function DraggableBox() {
  const pan = useRef(new Animated.ValueXY()).current;
  
  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event(
        [null, { dx: pan.x, dy: pan.y }],
        { useNativeDriver: false }
      ),
      onPanResponderRelease: () => {
        Animated.spring(pan, {
          toValue: { x: 0, y: 0 },
          useNativeDriver: false
        }).start();
      }
    })
  ).current;
  
  return (
    <Animated.View
      style={{
        transform: [{ translateX: pan.x }, { translateY: pan.y }]
      }}
      {...panResponder.panHandlers}
    >
      <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
    </Animated.View>
  );
}

3. React Native Gesture Handler (сторонняя библиотека):

import { GestureHandlerRootView, PanGestureHandler } from 'react-native-gesture-handler';
import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';

function GestureExample() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);
  
  const panGestureHandler = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.startX = translateX.value;
      ctx.startY = translateY.value;
    },
    onActive: (event, ctx) => {
      translateX.value = ctx.startX + event.translationX;
      translateY.value = ctx.startY + event.translationY;
    },
    onEnd: () => {
      translateX.value = withSpring(0);
      translateY.value = withSpring(0);
    },
  });
  
  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        { translateX: translateX.value },
        { translateY: translateY.value },
      ],
    };
  });
  
  return (
    <GestureHandlerRootView>
      <PanGestureHandler onGestureEvent={panGestureHandler}>
        <Animated.View style={[{ width: 100, height: 100, backgroundColor: 'red' }, animatedStyle]} />
      </PanGestureHandler>
    </GestureHandlerRootView>
  );
}

Рекомендации:

• Для простых нажатий используйте компоненты Touchable*
• Для сложных жестов предпочтительнее React Native Gesture Handler
• Комбинируйте с Reanimated для плавных высокопроизводительных жестов

11. Как обращаться к нативному коду из React Native?

Существует несколько способов взаимодействия с нативными API через React Native.

1. Встроенные нативные модули:

React Native уже включает многие нативные модули, например:

import { 
  Alert, 
  Vibration, 
  Platform,
  PermissionsAndroid,
  Linking
} from 'react-native';

// Примеры использования
Alert.alert('Заголовок', 'Сообщение', [{ text: 'OK' }]);
Vibration.vibrate(1000);
const isIOS = Platform.OS === 'ios';
Linking.openURL('https://example.com');

2. Создание собственных нативных модулей:

Для Android (Java):

// Android: ToastModule.java
public class ToastModule extends ReactContextBaseJavaModule {
  @Override
  public String getName() {
    return "ToastExample";
  }

  @ReactMethod
  public void showToast(String message, String duration) {
    int durationInt = Toast.LENGTH_SHORT;
    if (duration.equals("long")) {
      durationInt = Toast.LENGTH_LONG;
    }
    Toast.makeText(getReactApplicationContext(), message, durationInt).show();
  }
}

// Регистрация модуля
public class ToastPackage implements ReactPackage {
  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new ToastModule(reactContext));
    return modules;
  }
  // ...
}

Для iOS (Objective-C):

// iOS: RCTToastModule.m
@implementation RCTToastModule

RCT_EXPORT_MODULE(ToastExample);

RCT_EXPORT_METHOD(showToast:(NSString *)message duration:(NSString *)duration)
{
  UIAlertController *alert = [UIAlertController alertControllerWithTitle:nil
                                                                 message:message
                                                          preferredStyle:UIAlertControllerStyleAlert];
  
  [self.RCTPresentedViewController presentViewController:alert animated:YES completion:nil];
  
  int durationInt = [duration isEqualToString:@"long"] ? 3.5 : 2.0;
  
  dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(durationInt * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
    [alert dismissViewControllerAnimated:YES completion:nil];
  });
}

@end

Использование в JavaScript:

import { NativeModules } from 'react-native';
const { ToastExample } = NativeModules;

ToastExample.showToast('Привет из нативного кода!', 'short');

3. Использование TurboModules (новая архитектура):

// Определение спецификации в JavaScript
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  showToast(message: string, duration: string): void;
}

export default TurboModuleRegistry.get<Spec>('ToastExample');

Преимущества TurboModules:

• Типобезопасность через Codegen
• Ленивая загрузка для экономии памяти
• Прямой вызов без десериализации через JSI

12. Как тестировать React Native приложения?

Тестирование React Native приложений включает несколько уровней.

1. Модульное тестирование (Unit Testing):

// Компонент для тестирования
function Welcome({ name }) {
  return <Text testID="welcome">Привет, {name}!</Text>;
}

// Тест с использованием Jest и Testing Library
import { render, screen } from '@testing-library/react-native';

test('отображает приветственное сообщение', () => {
  render(<Welcome name="Алиса" />);
  expect(screen.getByTestID('welcome')).toHaveTextContent('Привет, Алиса!');
});

2. Компонентное тестирование:

import { render, fireEvent } from '@testing-library/react-native';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text testID="count">{count}</Text>
      <Button testID="increment" title="+" onPress={() => setCount(count + 1)} />
    </View>
  );
}

test('увеличивает счетчик при нажатии', () => {
  const { getByTestId } = render(<Counter />);
  
  expect(getByTestId('count').props.children).toBe(0);
  
  fireEvent.press(getByTestId('increment'));
  
  expect(getByTestId('count').props.children).toBe(1);
});

3. Интеграционное тестирование:

// Тестирование взаимодействия компонентов с использованием mock для API
jest.mock('./api', () => ({
  fetchUserData: jest.fn().mockResolvedValue({ name: 'Тестовый Пользователь' })
}));

test('загружает и отображает данные пользователя', async () => {
  const { getByText, findByText } = render(<UserProfile userId="123" />);
  
  expect(getByText('Загрузка...')).toBeTruthy();
  
  const userName = await findByText('Тестовый Пользователь');
  expect(userName).toBeTruthy();
  
  expect(api.fetchUserData).toHaveBeenCalledWith('123');
});

4. E2E тестирование:

Для сквозного тестирования в React Native обычно используется Detox или Appium.

Пример с Detox:

// e2e/firstTest.spec.js
describe('Пример приложения', () => {
  beforeAll(async () => {
    await device.launchApp();
  });

  it('должно показать приветственный экран', async () => {
    await expect(element(by.text('Добро пожаловать'))).toBeVisible();
  });

  it('должно перейти на экран профиля', async () => {
    await element(by.id('profile_button')).tap();
    await expect(element(by.text('Профиль пользователя'))).toBeVisible();
  });
});

Рекомендуемые инструменты:

• Jest для модульных и компонентных тестов
• @testing-library/react-native для компонентного тестирования
• React Native Mock для мокинга нативных модулей
• Detox для E2E тестирования на реальных устройствах
• Appium для кросс-платформенного E2E тестирования

13. Как управлять памятью и предотвращать утечки в React Native?

Управление памятью критично для мобильных приложений. Вот основные практики:

1. Обнаружение утечек памяти:

• Использование Performance Monitor в Metro
• Анализ с помощью Chrome DevTools (Heap Snapshots)
• Profiler в React DevTools

2. Распространенные причины утечек памяти:

// ❌ Пример утечки памяти
class LeakyComponent extends React.Component {
  componentDidMount() {
    // Проблема: событие остается прикрепленным даже после размонтирования
    AppState.addEventListener('change', this.handleAppStateChange);
    
    // Проблема: таймер никогда не очищается
    this.timer = setInterval(() => {
      console.log('Tick');
    }, 1000);
  }
  
  // ❌ Отсутствует componentWillUnmount для очистки
  
  handleAppStateChange = (nextAppState) => {
    // Обработка изменений состояния приложения
  };
  
  render() {
    return <View><Text>Я утекаю память!</Text></View>;
  }
}

// ✅ Исправленная версия
class FixedComponent extends React.Component {
  componentDidMount() {
    AppState.addEventListener('change', this.handleAppStateChange);
    
    this.timer = setInterval(() => {
      console.log('Tick');
    }, 1000);
  }
  
  componentWillUnmount() {
    // Очистка подписок на события
    AppState.removeEventListener('change', this.handleAppStateChange);
    
    // Очистка таймеров
    clearInterval(this.timer);
  }
  
  handleAppStateChange = (nextAppState) => {
    // Обработка изменений состояния приложения
  };
  
  render() {
    return <View><Text>Я правильно управляю памятью!</Text></View>;
  }
}

3. Практики предотвращения утечек памяти:

• Всегда очищайте подписки на события в componentWillUnmount или useEffect return
• Отменяйте API-запросы, если компонент размонтирован перед их завершением
• Очищайте таймеры и интервалы
• Не храните большие объекты данных в состоянии компонентов
• Используйте useMemo и useCallback для предотвращения ненужных пересозданий функций и объектов
• Рационально используйте изображения (размер, кэширование)
• Избегайте лишних анимаций в списках
• Следите за использованием замыканий в функциональных компонентах

Для функциональных компонентов:

function GoodComponent() {
  useEffect(() => {
    const subscription = someAPI.subscribe();
    
    // Cleanup функция будет вызвана при размонтировании
    return () => {
      subscription.unsubscribe();
    };
  }, []);
  
  // остальной код
}

14. Как взаимодействовать с базами данных в React Native?

React Native предлагает несколько способов для работы с данными.

1. AsyncStorage (встроенное хранилище для простых данных):

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

// Сохранение данных
const storeData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, JSON.stringify(value));
  } catch (e) {
    console.error('Ошибка сохранения данных: ', e);
  }
};

// Загрузка данных
const getData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    return value != null ? JSON.parse(value) : null;
  } catch (e) {
    console.error('Ошибка загрузки данных: ', e);
    return null;
  }
};

// Пример использования
storeData('user', { id: 1, name: 'Иван' });
getData('user').then(user => console.log(user));

2. SQLite (для структурированных данных):

import SQLite from 'react-native-sqlite-storage';

// Открытие/создание базы данных
const db = SQLite.openDatabase(
  { name: 'myapp.db', location: 'default' },
  () => console.log('База данных подключена'),
  error => console.error('Ошибка:', error)
);

// Создание таблицы
const createTable = () => {
  db.transaction(tx => {
    tx.executeSql(
      'CREATE TABLE IF NOT EXISTS Users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, age INTEGER);',
      [],
      (tx, results) => {
        console.log('Таблица создана');
      },
      error => {
        console.error('Ошибка создания таблицы:', error);
      }
    );
  });
};

// Добавление данных
const addUser = (name, age) => {
  db.transaction(tx => {
    tx.executeSql(
      'INSERT INTO Users (name, age) VALUES (?, ?)',
      [name, age],
      (tx, results) => {
        console.log('Результаты:', results.rowsAffected);
        if (results.rowsAffected > 0) {
          console.log('Пользователь добавлен с ID:', results.insertId);
        }
      },
      error => {
        console.error('Ошибка добавления пользователя:', error);
      }
    );
  });
};

// Запрос данных
const getUsers = () => {
  return new Promise((resolve, reject) => {
    db.transaction(tx => {
      tx.executeSql(
        'SELECT * FROM Users',
        [],
        (tx, results) => {
          const users = [];
          for (let i = 0; i < results.rows.length; i++) {
            users.push(results.rows.item(i));
          }
          resolve(users);
        },
        error => {
          reject(error);
        }
      );
    });
  });
};

3. Realm (альтернативная БД для мобильных приложений):

import Realm from 'realm';

// Определение схемы
const UserSchema = {
  name: 'User',
  primaryKey: 'id',
  properties: {
    id: 'int',
    name: 'string',
    age: 'int'
  }
};

// Открытие Realm
const openRealm = async () => {
  return await Realm.open({
    schema: [UserSchema],
  });
};

// Добавление пользователя
const addUser = async (id, name, age) => {
  const realm = await openRealm();
  
  realm.write(() => {
    realm.create('User', { id, name, age });
  });
  
  realm.close();
};

// Получение всех пользователей
const getAllUsers = async () => {
  const realm = await openRealm();
  const users = realm.objects('User');
  
  // Конвертация в обычный массив для удобства
  const usersArray = Array.from(users);
  
  realm.close();
  return usersArray;
};

4. Firebase (облачная база данных):

import firestore from '@react-native-firebase/firestore';

// Добавление документа
const addUser = async (user) => {
  try {
    const result = await firestore()
      .collection('Users')
      .add({
        name: user.name,
        age: user.age,
        createdAt: firestore.FieldValue.serverTimestamp()
      });
    
    console.log('Пользователь добавлен с ID:', result.id);
    return result.id;
  } catch (error) {
    console.error('Ошибка добавления:', error);
    throw error;
  }
};

// Получение документов
const getUsers = async () => {
  try {
    const snapshot = await firestore()
      .collection('Users')
      .orderBy('createdAt', 'desc')
      .get();
      
    return snapshot.docs.map(doc => {
      return {
        id: doc.id,
        ...doc.data()
      };
    });
  } catch (error) {
    console.error('Ошибка получения:', error);
    throw error;
  }
};

// Подписка на изменения (real-time)
const subscribeToUsers = (callback) => {
  return firestore()
    .collection('Users')
    .onSnapshot(snapshot => {
      const users = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      
      callback(users);
    });
};

Рекомендации по выбору:

• AsyncStorage: для простых данных (настройки, токены)
• SQLite: для сложных структурированных данных в оффлайн-режиме
• Realm: производительная альтернатива SQLite с удобным API
• Firebase: для облачного хранения с синхронизацией и real-time обновлениями

15. Как работать с формами в React Native?

Работа с формами в React Native требует специального подхода из-за особенностей мобильных устройств.

1. Базовое управление формами:

function SimpleForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  
  const handleSubmit = () => {
    if (!name || !email) {
      setError('Все поля обязательны');
      return;
    }
    
    if (!email.includes('@')) {
      setError('Некорректный email');
      return;
    }
    
    // Отправка данных
    console.log('Отправка:', { name, email });
    setError('');
  };
  
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Имя"
        value={name}
        onChangeText={setName}
      />
      
      <TextInput
        style={styles.input}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
      />
      
      {error ? <Text style={styles.error}>{error}</Text> : null}
      
      <Button title="Отправить" onPress={handleSubmit} />
    </View>
  );
}

2. Использование Formik:

import { Formik } from 'formik';
import * as Yup from 'yup';

// Схема валидации
const validationSchema = Yup.object().shape({
  name: Yup.string().required('Имя обязательно'),
  email: Yup.string()
    .email('Некорректный email')
    .required('Email обязателен'),
  password: Yup.string()
    .min(6, 'Минимум 6 символов')
    .required('Пароль обязателен')
});

function FormikForm() {
  return (
    <Formik
      initialValues={{ name: '', email: '', password: '' }}
      validationSchema={validationSchema}
      onSubmit={(values, { setSubmitting, resetForm }) => {
        console.log('Отправка:', values);
        // Асинхронная отправка данных
        setTimeout(() => {
          setSubmitting(false);
          resetForm();
          Alert.alert('Успех', 'Форма отправлена');
        }, 1000);
      }}
    >
      {({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting
      }) => (
        <View style={styles.container}>
          <TextInput
            style={styles.input}
            placeholder="Имя"
            value={values.name}
            onChangeText={handleChange('name')}
            onBlur={handleBlur('name')}
          />
          {errors.name && touched.name && (
            <Text style={styles.error}>{errors.name}</Text>
          )}
          
          <TextInput
            style={styles.input}
            placeholder="Email"
            value={values.email}
            onChangeText={handleChange('email')}
            onBlur={handleBlur('email')}
            keyboardType="email-address"
            autoCapitalize="none"
          />
          {errors.email && touched.email && (
            <Text style={styles.error}>{errors.email}</Text>
          )}
          
          <TextInput
            style={styles.input}
            placeholder="Пароль"
            value={values.password}
            onChangeText={handleChange('password')}
            onBlur={handleBlur('password')}
            secureTextEntry
          />
          {errors.password && touched.password && (
            <Text style={styles.error}>{errors.password}</Text>
          )}
          
          <Button
            title="Отправить"
            onPress={handleSubmit}
            disabled={isSubmitting}
          />
          
          {isSubmitting && <ActivityIndicator size="small" />}
        </View>
      )}
    </Formik>
  );
}

3. Использование React Hook Form:

import { useForm, Controller } from 'react-hook-form';

function HookForm() {
  const { control, handleSubmit, formState: { errors } } = useForm({
    defaultValues: {
      name: '',
      email: '',
      phone: ''
    }
  });
  
  const onSubmit = data => {
    console.log('Отправка:', data);
    Alert.alert('Успех', 'Форма отправлена');
  };
  
  return (
    <View style={styles.container}>
      <Controller
        control={control}
        rules={{ required: 'Имя обязательно' }}
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            style={styles.input}
            placeholder="Имя"
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
          />
        )}
        name="name"
      />
      {errors.name && <Text style={styles.error}>{errors.name.message}</Text>}
      
      <Controller
        control={control}
        rules={{
          required: 'Email обязателен',
          pattern: {
            value: /^\S+@\S+\.\S+$/,
            message: 'Некорректный email'
          }
        }}
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            style={styles.input}
            placeholder="Email"
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
            keyboardType="email-address"
            autoCapitalize="none"
          />
        )}
        name="email"
      />
      {errors.email && <Text style={styles.error}>{errors.email.message}</Text>}
      
      <Controller
        control={control}
        rules={{
          required: 'Телефон обязателен',
          pattern: {
            value: /^\d{10}$/,
            message: 'Должно быть 10 цифр'
          }
        }}
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            style={styles.input}
            placeholder="Телефон (10 цифр)"
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
            keyboardType="phone-pad"
          />
        )}
        name="phone"
      />
      {errors.phone && <Text style={styles.error}>{errors.phone.message}</Text>}
      
      <Button title="Отправить" onPress={handleSubmit(onSubmit)} />
    </View>
  );
}

Рекомендации для работы с формами:

• Учитывайте особенности клавиатуры (keyboardType, returnKeyType)
• Используйте KeyboardAvoidingView для предотвращения перекрытия полей клавиатурой
• Добавляйте проверку на правильность ввода (валидацию) перед отправкой
• Рассмотрите использование библиотек Formik или React Hook Form для сложных форм
• Предоставляйте визуальную обратную связь при взаимодействии (ошибки, загрузка)

16. Как оптимизировать размер React Native приложения?

Оптимизация размера приложения важна для более быстрой загрузки и установки.

1. Оптимизация JavaScript бандла:

// metro.config.js
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true, // Включаем для оптимизации размера
      },
    }),
  },
};

2. Разделение кода по платформам:

// Вместо условных проверок в коде
const styles = StyleSheet.create({
  container: {
    padding: Platform.OS === 'ios' ? 20 : 16,
    // Другие стили
  }
});

// Лучше использовать разделение файлов по платформам
// Button.ios.js и Button.android.js
import Button from './Button'; // Автоматически импортирует правильную версию

3. Оптимизация изображений:

// Использование Asset кэширования
import { Asset } from 'expo-asset';

const cacheImages = (images) => {
  return images.map(image => {
    if (typeof image === 'string') {
      return Image.prefetch(image);
    } else {
      return Asset.fromModule(image).downloadAsync();
    }
  });
};

// Предварительная загрузка
Promise.all(cacheImages([
  require('./assets/bg.png'),
  'https://example.com/image.jpg',
]));

4. Использование Hermes для Android:

// android/app/build.gradle
def enableHermes = project.ext.react.get("enableHermes", true);

android {
  ...
}

// Включаем Hermes
project.ext.react = [
  enableHermes: true
]