Кроссплатформенный разработчик React Native (Профессиональный уровень)

Билет №1 

Теория 

1. Объясните, в чем заключается разница между использованием `FlatList` и обычного `ScrollView` с точки зрения производительности? 

2. Какие основные задачи решает нативная интеграция в React Native?

Ответы: 

1. FlatList оптимизирован для работы с большими списками за счет виртуализации — он отрисовывает только те элементы, которые находятся на экране, что уменьшает потребление памяти и повышает отзывчивость интерфейса. ScrollView же загружает все элементы сразу, что может привести к снижению производительности при большом объеме данных. 

2. Нативная интеграция позволяет использовать платформенные API (например, камеру, геолокацию, датчики), повысить производительность критичных участков кода, расширить функционал приложения за пределами возможностей JavaScript, а также обеспечить более тесное взаимодействие с операционной системой.

Практика 

Реализуйте компонент, который использует `useState` и `useEffect`, чтобы подтягивать данные с внешнего API (например, https://jsonplaceholder.typicode.com/users) и выводит список имен пользователей.

import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users') 
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => console.error(err));
  }, []);

  if (loading) {
    return <ActivityIndicator size="large" />;
  }

  return (
    <View>
      {users.map(user => (
        <Text key={user.id}>{user.name}</Text>
      ))}
    </View>
  );
};

export default UserList;

Билет №2 

Теория 

1. Что такое Turbo Modules и как они улучшают работу с нативным кодом в React Native? 

2. В чём отличие между `React.memo`, `useMemo` и `useCallback`?

Ответы: 

1. Turbo Modules — это новая архитектура модулей, которая позволяет вызывать нативный код напрямую через JSI без использования моста, что значительно увеличивает производительность и совместимость с новыми версиями React Native. 

2. React.memo используется для оптимизации рендеринга компонентов, useMemo — для мемоизации значений, useCallback — для мемоизации функций. Все три механизма помогают избежать повторных вычислений или ререндеров, если зависимости не изменились.

Практика 

Создайте простой Redux-стор и экшен, который управляет состоянием темы (светлая/темная). Экспортируйте стор и реализуйте редьюсер, изменяющий состояние темы по переданному типу действия.

import { createStore } from 'redux';

const initialState = {
  theme: 'light',
};

const themeReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'TOGGLE_THEME':
      return {
        ...state,
        theme: state.theme === 'light' ? 'dark' : 'light',
      };
    default:
      return state;
  }
};

const store = createStore(themeReducer);

export default store;

Билет №3 

Теория 

1. Охарактеризуйте подходы к тестированию React Native приложений. Какие виды тестов используются? 

2. Как работают глубокие ссылки (deep links) в React Navigation?

Ответы: 

1. В React Native применяются unit-тесты (Jest), интеграционные (Testing Library) и end-to-end тесты (Detox). Unit-тесты проверяют логику отдельных функций, интеграционные — взаимодействие между компонентами, а E2E-тесты имитируют действия пользователя в реальном приложении. 

2. Deep links позволяют открывать конкретные экраны приложения через URL. В React Navigation настраивается параметр linking, где указывается scheme и структура путей. При переходе по такому URL приложение открывается и переходит на нужный экран.

Практика 

Реализуйте экран с кнопкой "Переключить тему", которая отправляет действие в Redux для изменения текущей темы, и отображает текущее значение темы.

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';

const ThemeScreen = () => {
  const dispatch = useDispatch();
  const theme = useSelector(state => state.theme);

  const toggleTheme = () => {
    dispatch({ type: 'TOGGLE_THEME' });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Текущая тема: {theme}</Text>
      <Button title="Переключить тему" onPress={toggleTheme} />
    </View>
  );
};

export default ThemeScreen;

Билет №4 

Теория 

1. Что такое нативные модули в React Native и зачем они нужны? 

2. Какие преимущества дает использование TypeScript в проектах на React Native?

Ответы: 

1. Нативные модули — это части кода на Java/Kotlin (Android) или Objective-C/Swift (iOS), которые могут быть вызваны из JavaScript. Они нужны для доступа к функциям, недоступным через стандартный API React Native, таких как работа с датчиками, Bluetooth и другие нативные возможности. 

2. TypeScript добавляет статическую типизацию, что улучшает читаемость кода, упрощает рефакторинг, обнаруживает ошибки на этапе разработки и улучшает автодополнение в IDE.

Практика 

Напишите компонент, который отслеживает геолокацию пользователя и отображает широту и долготу. Используйте библиотеку expo-location.

import React, { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import * as Location from 'expo-location';

const LocationTracker = () => {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
        return;
      }

      let currentLocation = await Location.getCurrentPositionAsync({});
      setLocation(currentLocation.coords);
    })();
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {errorMsg && <Text>{errorMsg}</Text>}
      {location ? (
        <>
          <Text>Широта: {location.latitude}</Text>
          <Text>Долгота: {location.longitude}</Text>
        </>
      ) : (
        <Text>Получение местоположения...</Text>
      )}
    </View>
  );
};

export default LocationTracker;

 Билет №5 

Теория 

1. Что такое React Navigation и каковы его основные компоненты? 

2. Как реализуется работа с асинхронными операциями в React Native?

Ответы: 

1. React Navigation — это библиотека для реализации навигации между экранами в React Native. Основные компоненты: `NavigationContainer`, `Stack.Navigator`, `Tab.Navigator`, `Drawer.Navigator`. Они позволяют организовать переходы между экранами с поддержкой стека, табов или выдвижного меню. 

2. Асинхронные операции в React Native реализуются через `fetch`, `async/await`, `Promise`, а также сторонние библиотеки, такие как `axios`. Для управления состоянием используются хуки `useState` и `useEffect`.

Практика 

Создайте простой стековый навигатор с двумя экранами: HomeScreen и DetailsScreen. На первом экране кнопка "Перейти к деталям", которая открывает второй экран.

import React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Главная страница</Text>
      <Button title="Перейти к деталям" onPress={() => navigation.navigate('Details')} />
    </View>
  );
};

const DetailsScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Экран деталей</Text>
    </View>
  );
};

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

export default AppNavigator;

Билет №6 

Теория 

1. Какие существуют способы оптимизации производительности в React Native? 

2. В чем разница между `React.PureComponent` и `React.memo`?

Ответы: 

1. Среди основных способов: использование `React.memo`, `PureComponent`, `useMemo`, `useCallback`, виртуализация списков (`FlatList`), минимизация ререндеров, правильное управление состоянием, мемоизация функций и значений, использование Hermes-движка, lazy loading. 

2. `PureComponent` применяется к классовым компонентам и сравнивает props и state перед ререндером. `React.memo` используется для функциональных компонентов и работает похожим образом, но не сравнивает состояние внутри компонента.

Практика 

Реализуйте форму с двумя полями ввода (имя и email) и кнопкой отправки. При нажатии на кнопку выводите значения полей в консоль.

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';

const FormComponent = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = () => {
    console.log('Имя:', name);
    console.log('Email:', email);
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Введите имя"
        value={name}
        onChangeText={setName}
        style={{ borderBottomWidth: 1, marginBottom: 10 }}
      />
      <TextInput
        placeholder="Введите email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        style={{ borderBottomWidth: 1, marginBottom: 10 }}
      />
      <Button title="Отправить" onPress={handleSubmit} />
    </View>
  );
};

export default FormComponent;

Билет №7 

Теория 

1. Как работают нативные модули в React Native и какие шаги необходимы для их создания? 

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

Ответы: 

1. Нативные модули создаются отдельно для Android и iOS. Для Android пишется Java/Kotlin-класс, реализующий интерфейс `NativeModule`. Для iOS — Objective-C/Swift-класс, реализующий `RCTBridgeModule`. Затем модуль регистрируется и вызывается из JS. 

2. Для тестирования используются: Jest (unit-тесты), Testing Library (интеграционные тесты), Detox (end-to-end тестирование). Также могут применяться инструменты типа Snapshot Testing и mocking внешних зависимостей.

Практика 

Напишите unit-тест с использованием Jest для функции, которая принимает массив чисел и возвращает сумму всех элементов.

// sum.js
export const sumArray = (arr) => arr.reduce((acc, val) => acc + val, 0);

// sum.test.js
import { sumArray } from './sum';

test('сумма массива чисел равна корректному результату', () => {
  expect(sumArray([1, 2, 3])).toBe(6);
  expect(sumArray([-1, 0, 1])).toBe(0);
  expect(sumArray([])).toBe(0);
});

Билет №8 

Теория 

1. Что такое CI/CD и как он применяется в проектах на React Native? 

2. Какие подходы к локализации поддерживаются в React Native?

Ответы: 

1. CI/CD (непрерывная интеграция и доставка) позволяет автоматизировать сборку, тестирование и деплой приложений. В React Native используется GitHub Actions, GitLab CI, Fastlane, EAS Build для автоматической проверки кода и выпуска новых версий. 

2. Локализация реализуется через библиотеки вроде `i18next`, `react-i18next`, `expo-localization`. Поддерживаются форматирование дат, валют, чисел, множественное число и динамическое изменение языка в приложении.

Практика 

Создайте простое приложение с поддержкой двух языков (русский и английский), где пользователь может переключать язык, и текст будет обновляться соответственно.

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        greeting: 'Hello',
        button: 'Switch to Russian'
      }
    },
    ru: {
      translation: {
        greeting: 'Привет',
        button: 'Переключить на Английский'
      }
    }
  },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false
  }
});

export default i18n;

// App.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import i18n from './i18n';

const App = () => {
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>{i18n.t('greeting')}</Text>
      <Button
        title={i18n.t('button')}
        onPress={() => changeLanguage(i18n.language === 'en' ? 'ru' : 'en')}
      />
    </View>
  );
};

export default App;

Билет №9 

Теория 

1. Что такое нативная анимация в React Native и как она реализуется с помощью Reanimated 2? 

2. Какие подходы используются для работы с локальным хранилищем данных в React Native?

Ответы: 

1. Нативная анимация позволяет запускать анимации на уровне нативного кода, минуя JS-поток. В Reanimated 2 это достигается за счет JSI и использования `worklet`-функций, что делает анимации более отзывчивыми и производительными. 

2. Для работы с локальным хранилищем используются AsyncStorage (простое хранение строк), SecureStore (защищенное хранение), MMKV (высокопроизводительное хранилище от WeChat), SQLite (для структурированных данных) и другие решения.

Практика 

Реализуйте простой счетчик, который сохраняет значение в MMKV при каждом изменении и восстанавливает его при перезапуске приложения.

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import MMKV from 'react-native-mmkv';

const storage = new MMKV();

const CounterApp = () => {
  const [count, setCount] = useState(storage.getNumber('count') || 0);

  useEffect(() => {
    storage.set('count', count);
  }, [count]);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Счетчик: {count}</Text>
      <Button title="Увеличить" onPress={() => setCount(prev => prev + 1)} />
    </View>
  );
};

export default CounterApp;

Билет №10 

Теория 

1. Объясните концепцию работы с нативными модулями через Turbo Modules в новой архитектуре React Native. 

2. Какие инструменты используются для отладки React Native приложений?

Ответы: 

1. Turbo Modules позволяют вызывать нативный код напрямую из JS через JSI без использования моста. Это повышает производительность и упрощает интеграцию новых версий React Native. Используется Codegen для генерации типов и ABI-совместимости. 

2. Для отладки применяются Chrome DevTools, React Developer Tools, Flipper, LogBox, а также нативные инструменты Android Studio и Xcode. Flipper особенно полезен для просмотра сетевых запросов, состояния Redux, логов и UI-дерева.

Практика 

Напишите функцию, которая отправляет POST-запрос к API с данными пользователя и обрабатывает ошибки сети.

const sendUserData = async (userData) => {
  try {
    const response = await fetch('https://api.example.com/user',  {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(userData),
    });

    if (!response.ok) {
      throw new Error(`Ошибка HTTP: ${response.status}`);
    }

    const result = await response.json();
    console.log('Данные успешно отправлены:', result);
    return result;
  } catch (error) {
    console.error('Ошибка отправки данных:', error.message);
    throw error;
  }
};

Билет №11 

Теория 

1. Что такое Codegen в новой архитектуре React Native и зачем он нужен? 

2. Как реализуется работа с push-уведомлениями в React Native?

Ответы: 

1. Codegen — это процесс генерации нативного кода из TypeScript/JavaScript интерфейсов, чтобы обеспечить строгую типизацию и совместимость между JS и нативным кодом. Он используется в новых возможностях, таких как Turbo Modules и Fabric. 

2. Push-уведомления реализуются через Firebase Cloud Messaging (Android) и Apple Push Notification Service (iOS). В React Native могут использоваться библиотеки, такие как `expo-notifications`, `@react-native-firebase/messaging`.

Практика 

Создайте экран, который подписывается на push-уведомления и выводит текст последнего полученного уведомления.

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import * as Notifications from 'expo-notifications';

Notifications.setNotificationHandler({
  handleSetTimeOut: () => {},
  handleSettings: () => {},
});

const NotificationScreen = () => {
  const [notification, setNotification] = useState(null);

  useEffect(() => {
    const subscription = Notifications.addNotificationReceivedListener(notification => {
      setNotification(notification);
    });

    return () => subscription.remove();
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Полученные уведомления</Text>
      {notification && <Text>{notification.request.content.body}</Text>}
    </View>
  );
};

export default NotificationScreen;

Билет №12 

Теория 

1. Какие основные отличия между Expo и bare workflow в React Native? 

2. Охарактеризуйте работу с файловой системой в React Native.

Ответы: 

1. Expo предоставляет готовые SDK и упрощает разработку, но ограничивает доступ к нативному коду. Bare workflow позволяет использовать нативные модули и полностью контролировать проект, но требует ручной настройки зависимостей и сборки. 

2. Работа с файловой системой осуществляется через библиотеки вроде `react-native-fs` или `expo-file-system`. Они позволяют читать, записывать, удалять файлы, работать с медиа и кэшировать данные.

Практика 

Напишите функцию, которая загружает файл по URL и сохраняет его в локальном хранилище устройства.

import RNFS from 'react-native-fs';

const downloadFile = async (url, filename) => {
  const path = `${RNFS.DocumentDirectoryPath}/${filename}`;

  try {
    const result = await RNFS.downloadFile({
      fromUrl: url,
      toFile: path,
    }).promise;

    console.log('Файл сохранён по пути:', path);
    return path;
  } catch (error) {
    console.error('Ошибка загрузки файла:', error);
    throw error;
  }
};

Билет №13 

Теория 

1. Что такое Fabric и как он влияет на производительность и архитектуру React Native? 

2. Какие существуют способы оптимизации размера APK/IPA в React Native?

Ответы: 

1. Fabric — это новая система рендеринга в React Native, которая заменяет старый "Paper" движок. Она улучшает производительность, позволяет лучше взаимодействовать с нативными компонентами и поддерживает современные возможности, такие как Turbo Modules. 

2. Способы: удаление неиспользуемых зависимостей, использование Tree Shaking, минификация JavaScript, оптимизация изображений, исключение debug-библиотек, использование Hermes, выборочная сборка только необходимых языковых пакетов.

Практика 

Создайте экран с кнопкой, которая запускает показ диалога с подтверждением перед выходом из приложения.

import React from 'react';
import { View, Text, Button, Alert } from 'react-native';

const ExitConfirmationScreen = () => {
  const handleExit = () => {
    Alert.alert(
      'Выход',
      'Вы уверены, что хотите выйти?',
      [
        { text: 'Отмена', style: 'cancel' },
        { text: 'Да', onPress: () => BackHandler.exitApp() }
      ],
      { cancelable: false }
    );
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Выйти из приложения" onPress={handleExit} />
    </View>
  );
};

export default ExitConfirmationScreen;

Билет №14 

Теория 

1. Как реализуется работа с Bluetooth в React Native? 

2. Какие особенности работы с камерой и галереей в React Native?

Ответы: 

1. Для работы с Bluetooth используются библиотеки вроде `react-native-ble-plx` или `expo-bluetooth`. Они позволяют сканировать устройства, подключаться к ним, обмениваться данными и обрабатывать ошибки. 

2. Камера и галерея реализуются через `expo-camera`, `expo-image-picker` или `react-native-image-picker`. Позволяют делать фото, выбирать из галереи, записывать видео и обрабатывать медиафайлы.

Практика 

Создайте компонент, который открывает галерею и отображает выбранное изображение.

import React, { useState } from 'react';
import { View, Image, Button } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

const ImagePickerComponent = () => {
  const [image, setImage] = useState(null);

  const pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.canceled) {
      setImage(result.assets[0].uri);
    }
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Выбрать изображение" onPress={pickImage} />
      {image && <Image source={{ uri: image }} style={{ width: 200, height: 200, marginTop: 20 }} />}
    </View>
  );
};

export default ImagePickerComponent;

Билет №15 

Теория 

1. Что такое EAS Build и как он используется в экосистеме Expo? 

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

Ответы: 

1. EAS Build — это облачная система сборки от Expo, которая позволяет собирать iOS и Android приложения без необходимости локальной настройки Xcode или Android Studio. Поддерживает кастомные билды и автоматическую публикацию. 

2. Для документирования используются Storybook, Docusaurus, Swagger (для API), JSDoc/TSDoc, Markdown-документация в репозитории, Readme-файлы и инструменты автоматической генерации документации.

Практика 

Создайте простой пример использования Storybook для одного из ваших компонентов.

// stories/Button.stories.js
import React from 'react';
import { View } from 'react-native';
import Button from '../components/Button';

export default {
  title: 'Components/Button',
  component: Button,
};

const Template = (args) => (
  <View style={{ padding: 20 }}>
    <Button {...args} />
  </View>
);

export const Primary = Template.bind({});
Primary.args = {
  title: 'Кнопка',
  onPress: () => alert('Нажата'),
};