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

Билет №1 

Теоретическая часть 

1. Опишите, что такое React Native и как он обеспечивает кроссплатформенность 

2. В чём разница между функциональными и классовыми компонентами? 

Ответы на теоретические вопросы: 

1. React Native — это фреймворк для разработки мобильных приложений с использованием JavaScript. Он позволяет писать код один раз и запускать его на iOS и Android за счёт использования нативных компонентов и моста между JS-движком и нативным кодом 

2. Функциональные компоненты — это простые функции, возвращающие JSX. Они работают с состоянием через хуки. Классовые компоненты — это ES6-классы, наследующие от React.Component, и используют методы жизненного цикла и внутреннее состояние через this.state 

Практическая часть 

Создайте простой компонент ButtonWithText, который принимает текст и вызывает функцию onPress при нажатии. Реализуйте стилизацию кнопки и текста внутри неё 

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const ButtonWithText = ({ text, onPress }) => {
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text style={styles.text}>{text}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007BFF',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  text: {
    color: '#FFFFFF',
    fontSize: 16,
  },
});

export default ButtonWithText;

Билет №2 

Теоретическая часть 

1. Что такое props и state и в чём их основное отличие? 

2. Как работает система навигации в React Navigation? 

Ответы на теоретические вопросы: 

1. Props — это данные, передаваемые из родительского компонента в дочерний. State — это внутреннее состояние компонента, изменяемое со временем и влияющее на его рендеринг. Props неизменны внутри компонента, а state управляется самим компонентом 

2. React Navigation использует навигаторы (Stack, Tab, Drawer) для управления переходами между экранами. Экраны добавляются в стек или организуются по типу вкладок или бокового меню. Навигация осуществляется через метод navigate() или push(), pop() 

Практическая часть 

Реализуйте простую стековую навигацию между двумя экранами: HomeScreen и DetailsScreen. На первом экране должна быть кнопка, которая переходит на второй экран 

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

const Stack = createNativeStackNavigator();

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 App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Билет №3 

Теоретическая часть 

1. Объясните, что такое хук useEffect и когда он используется 

2. Как работают Flexbox-стили в React Native? 

Ответы на теоретические вопросы: 

1. useEffect — это хук, позволяющий выполнять побочные эффекты в функциональных компонентах. Используется для загрузки данных, подписки на события или прямого взаимодействия с API или нативными модулями. Выполняется после рендеринга компонента 

2. Flexbox в React Native определяет расположение элементов внутри контейнера. Основные свойства: flexDirection (направление), justifyContent (выравнивание по главной оси), alignItems (выравнивание по поперечной оси). Позволяет создавать адаптивные макеты 

Практическая часть 

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

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

const FlexExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box}><Text>Лево</Text></View>
      <View style={styles.box}><Text>Центр</Text></View>
      <View style={styles.box}><Text>Право</Text></View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 20,
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#DDDDDD',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default FlexExample;

Билет №4 

Теоретическая часть 

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

2. Как реализовать передачу параметров между экранами в React Navigation? 

Ответы на теоретические вопросы: 

1. AsyncStorage — это асинхронное хранилище пар ключ-значение. Используется для сохранения небольших объёмов данных локально, таких как токены авторизации или пользовательские настройки. Поддерживает методы setItem(), getItem(), removeItem() 

2. Параметры передаются через объект params при вызове navigate(). Пример: navigation.navigate('Details', { id: 123 }). На целевом экране доступ к параметрам получают через route.params 

Практическая часть 

Сохраните строку "username" в AsyncStorage и выведите её в консоль 

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const StorageExample = () => {
  useEffect(() => {
    const saveData = async () => {
      await AsyncStorage.setItem('username', 'john_doe');
      const storedValue = await AsyncStorage.getItem('username');
      console.log(storedValue);
    };
    saveData();
  }, []);

  return (
    <View>
      <Text>Данные сохранены и выведены в консоль</Text>
    </View>
  );
};

export default StorageExample;

Билет №5 

Теоретическая часть 

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

2. В чём отличие ScrollView от FlatList? 

Ответы на теоретические вопросы: 

1. Redux — это библиотека управления состоянием. Используется для централизованного хранения и обновления состояния приложения. Состоит из store, actions и reducers. Полезен в крупных приложениях с множеством компонентов 

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

Практическая часть 

Создайте список с помощью FlatList, который отображает массив чисел от 1 до 10 

import React from 'react';
import { View, FlatList, Text, StyleSheet } from 'react-native';

const NumberList = () => {
  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item}</Text>
    </View>
  );

  return (
    <FlatList
      data={numbers}
      renderItem={renderItem}
      keyExtractor={item => item.toString()}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 15,
    borderBottomWidth: 1,
    borderColor: '#ccc',
  },
});

export default NumberList;

Билет №6 

Теоретическая часть 

1. Как работает система стилизации в React Native? 

2. Что такое хук useState и как он используется? 

Ответы на теоретические вопросы: 

1. Стилизация осуществляется через StyleSheet API или inline-стили. Стили создаются как объекты JavaScript с использованием camelCase для свойств, таких как backgroundColor. Поддерживает Flexbox для расположения элементов 

2. useState — это хук, который позволяет добавлять реактивное состояние в функциональные компоненты. Он возвращает массив из текущего значения состояния и функции для его обновления 

Практическая часть 

Создайте кнопку, при нажатии на которую увеличивается значение счетчика и отображается новое значение 

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

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text>Счетчик: {count}</Text>
      <Button title="Увеличить" onPress={() => setCount(count + 1)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Counter;

Билет №7 

Теоретическая часть 

1. Опишите, что представляет собой архитектура Redux 

2. Как работают хуки useMemo и useCallback? 

Ответы на теоретические вопросы: 

1. Redux следует однонаправленному потоку данных: Action → Reducer → State. Action описывает событие, Reducer изменяет состояние на основе действия, а новое состояние становится доступно всем компонентам 

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

Практическая часть 

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

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

const UserForm = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');

  const handleSubmit = () => {
    console.log(`Имя: ${name}, Возраст: ${age}`);
  };

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="Введите имя"
        value={name}
        onChangeText={setName}
        style={styles.input}
      />
      <TextInput
        placeholder="Введите возраст"
        value={age}
        onChangeText={setAge}
        keyboardType="numeric"
        style={styles.input}
      />
      <Button title="Отправить" onPress={handleSubmit} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    borderBottomWidth: 1,
    marginBottom: 15,
    padding: 8,
  },
});

export default UserForm;

Билет №8 

Теоретическая часть 

1. Что такое Expo и какие преимущества он даёт? 

2. В чём разница между managed и bare workflow в React Native? 

Ответы на теоретические вопросы: 

1. Expo — это платформа и SDK, упрощающая разработку на React Native. Преимущества: готовые модули, Live Reload, отладка без сборки, поддержка множества устройств 

2. Managed workflow предоставляет абстракцию над нативным кодом и удобство работы с Expo Go. Bare workflow требует самостоятельной настройки нативного кода и больше контроля над проектом 

Практическая часть 

Реализуйте экран с Modal, который открывается по кнопке и содержит текстовое сообщение 

import React, { useState } from 'react';
import { View, Text, Button, Modal, StyleSheet } from 'react-native';

const ModalExample = () => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Показать модальное окно" onPress={() => setIsVisible(true)} />
      <Modal visible={isVisible} animationType="slide" transparent={false}>
        <View style={styles.modalContainer}>
          <Text>Это модальное окно</Text>
          <Button title="Закрыть" onPress={() => setIsVisible(false)} />
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
});

export default ModalExample;

Билет №9 

Теоретическая часть 

1. Какие основные методы жизненного цикла есть у классовых компонентов? 

2. Что такое Context API и когда его стоит использовать? 

Ответы на теоретические вопросы: 

1. componentDidMount вызывается после монтирования, componentDidUpdate — после обновления, componentWillUnmount — перед удалением. Эти методы позволяют выполнять побочные эффекты 

2. Context API — это механизм передачи данных глубоко вложенным компонентам без прокидывания props. Используется для тем оформления, языковых настроек и других общих данных 

Практическая часть 

Создайте простой провайдер темы (light/dark), который меняет цвет фона и текста на экране 

import React, { createContext, useState, useContext } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [darkMode, setDarkMode] = useState(false);
  const toggleTheme = () => setDarkMode(!darkMode);

  const theme = darkMode ? dark : light;

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const AppContent = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <View style={[styles.container, { backgroundColor: theme.background }]}>
      <Text style={{ color: theme.text }}>Текущая тема: {theme.name}</Text>
      <Button title="Переключить тему" onPress={toggleTheme} />
    </View>
  );
};

const App = () => {
  return (
    <ThemeProvider>
      <AppContent />
    </ThemeProvider>
  );
};

const light = {
  name: 'Светлая',
  background: '#FFFFFF',
  text: '#000000',
};

const dark = {
  name: 'Темная',
  background: '#121212',
  text: '#FFFFFF',
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
});

export default App;

Билет №10 

Теоретическая часть 

1. Что такое EAS Build и зачем он нужен? 

2. Как проверить, на какой платформе запущено приложение? 

Ответы на теоретические вопросы: 

1. EAS Build — это облачная система сборки приложений Expo. Позволяет собирать APK/IPA файлы без локальной настройки Xcode или Android Studio 

2. Для определения платформы используется модуль Platform из React Native. Метод Platform.OS возвращает 'ios' или 'android' 

Практическая часть 

Создайте экран, который отображает разный текст в зависимости от платформы 

import React from 'react';
import { View, Text, Platform, StyleSheet } from 'react-native';

const PlatformInfo = () => {
  const platformName = Platform.OS === 'ios' ? 'iOS' : 'Android';

  return (
    <View style={styles.container}>
      <Text>Вы используете: {platformName}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default PlatformInfo;

Билет №11 

Теоретическая часть 

1. Что такое StatusBar и как им управлять? 

2. Как работает fetch в React Native? 

Ответы на теоретические вопросы: 

1. StatusBar — это компонент, позволяющий управлять строкой состояния устройства. Можно менять цвет текста, фон, скрывать или показывать 

2. Fetch API используется для выполнения HTTP-запросов. Поддерживает GET, POST и другие методы. Возвращает Promise, который можно обработать через async/await или .then() 

Практическая часть 

Выполните GET-запрос к https://jsonplaceholder.typicode.com/posts и выведите заголовки первых трёх постов 

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

const PostFetcher = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts') 
      .then(response => response.json())
      .then(data => setPosts(data.slice(0, 3)));
  }, []);

  return (
    <View style={styles.container}>
      {posts.map(post => (
        <Text key={post.id}>{post.title}</Text>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
});

export default PostFetcher;

Билет №12 

Теоретическая часть 

1. Что такое PixelRatio и зачем он используется? 

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

Ответы на теоретические вопросы: 

1. PixelRatio — это API, позволяющий определить плотность пикселей на экране. Используется для корректного отображения размеров и изображений на разных устройствах 

2. Нативные модули создаются на Swift/Objective-C (iOS) и Java/Kotlin (Android), затем подключаются к JS-части через мост. Требуют eject или использование EAS Build 

Практическая часть 

Создайте компонент, который отображает размер экрана устройства 

import React from 'react';
import { View, Text, Dimensions, StyleSheet } from 'react-native';

const ScreenSize = () => {
  const { width, height } = Dimensions.get('window');

  return (
    <View style={styles.container}>
      <Text>Ширина экрана: {width}</Text>
      <Text>Высота экрана: {height}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
});

export default ScreenSize;

Билет №13 

Теоретическая часть 

1. Что такое Expo Camera и как он используется? 

2. Как происходит отладка в React Native? 

Ответы на теоретические вопросы: 

1. Expo Camera — это модуль, предоставляющий доступ к камере устройства. Позволяет делать фото, записывать видео и сканировать QR-коды 

2. Отладка возможна через DevTools в Metro Bundler, Chrome Debugger, React Developer Tools, а также с помощью console.log и Alert 

Практическая часть 

Создайте компонент, который выводит alert с сообщением "Привет, мир!" при загрузке экрана 

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

const GreetingAlert = () => {
  useEffect(() => {
    alert('Привет, мир!');
  }, []);

  return <View />;
};

export default GreetingAlert;

Билет №14 

Теоретическая часть 

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

2. Как проверить версию Expo SDK в проекте? 

Ответы на теоретические вопросы: 

1. SQLite — это легковесная встраиваемая система управления базами данных. В React Native её можно использовать через сторонние библиотеки для хранения структурированных данных локально 

2. Версию Expo SDK можно найти в файле app.json или package.json, в зависимости от конфигурации проекта 

Практическая часть 

Создайте простую таблицу в SQLite и добавьте одну запись 

import React, { useEffect } from 'react';
import * as SQLite from 'expo-sqlite';

const db = SQLite.openDatabase('db.db');

const SQLiteExample = () => {
  useEffect(() => {
    db.transaction(tx => {
      tx.executeSql(
        'CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT);'
      );
      tx.executeSql('INSERT INTO items (name) VALUES (?)', ['Тестовая запись']);
      tx.executeSql('SELECT * FROM items', [], (_, { rows }) => {
        console.log(rows._array);
      });
    });
  }, []);

  return null;
};

export default SQLiteExample;

Билет №15 

Теоретическая часть 

1. Что такое Eject и зачем он используется? 

2. Как тестировать приложения на реальных устройствах? 

Ответы на теоретические вопросы: 

1. Eject — это процесс выхода из managed workflow Expo в bare workflow, чтобы получить полный контроль над нативным кодом 

2. Приложения можно тестировать через USB-подключение, OTA-обновления или облачные сервисы, такие как Firebase Test Lab 

Практическая часть 

Создайте экран с ActivityIndicator, который исчезает через 3 секунды 

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

const LoaderScreen = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 3000);
  }, []);

  return (
    <View style={styles.container}>
      {loading ? <ActivityIndicator size="large" /> : <Text>Загрузка завершена</Text>}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default LoaderScreen;