Что такое React Native Введение для начинающих

Введение

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

Почему React Native так востребован? Потому что он позволяет использовать один и тот же код для обеих платформ, что заметно сокращает трудозатраты и время на разработку. Если вы уже знакомы с React — освоить React Native будет гораздо проще, ведь множество концепций и подходов переносятся почти без изменений.

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

Что такое React Native

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

React Native предоставляет множество возможностей для создания мобильных приложений, но для эффективной разработки важно понимать не только базовые концепции, но и продвинутые техники, такие как работа с нативными модулями, оптимизация производительности и интеграция сторонних библиотек. Если вы хотите детальнее погрузиться в мир кроссплатформенной разработки и освоить все тонкости создания профессиональных мобильных приложений — приходите на наш большой курс React Native и Expo Router. На курсе 184 уроков и 11 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Основные преимущества React Native

• Кроссплатформенность. Один код сразу для iOS и Android.
• Использование JavaScript и React. Не нужно учить Java или Kotlin для Android и Swift или Objective-C для iOS.
• Живой Reload и Fast Refresh. Можно видеть изменения в коде на экране почти мгновенно, без полной пересборки.
• Гибкость. Легко подключать нативные модули, если базового функционала не хватает.
• Большое сообщество. Множество библиотек, расширений и обучающих материалов.

Как работает React Native под капотом

React Native работает по следующему принципу:

1. Вы пишете код на JavaScript, используя компоненты React Native, которые напоминают обычные компоненты React.
2. Приложение запускается на устройстве, где работает JavaScript-движок (например, Hermes, JSC или V8).
3. Ваш код взаимодействует с платформой через специальный “мост” (Bridge), переводя ваши команды в родные элементы интерфейса.
4. На экране появляются нативные кнопки, списки, поля, а не просто “рисуется” сайт в браузере.

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

Установка среды и первый проект

Давайте разберемся, как быстро установить React Native и запустить первое приложение. Это несложно, если следовать пошаговой инструкции.

Шаг 1: Установка Node.js и npm

React Native требует наличия Node.js и npm. Скачайте их на официальном сайте: https://nodejs.org

Шаг 2: Установка Expo CLI или React Native CLI

Есть два основных способа начать работу:

• Expo — идеальный вариант для новичков, так как максимально автоматизирует работу со сборкой и тестированием.
• React Native CLI — ближе к “голому” React Native, дает больше контроля, но требует знаний нативных инструментов.

Рассмотрим вариант с Expo:

npm install -g expo-cli

Команда устанавливает Expo CLI глобально на ваш компьютер

Шаг 3: Создание нового проекта

expo init MyFirstApp

Эта команда создаст новый проект с базовой структурой

Следуйте инструкциям на экране: выберите “blank” для чистого проекта. После создания перейдите в папку проекта:

cd MyFirstApp

Шаг 4: Запуск проекта

expo start

Запускает среду Expo, откроется браузер с панелью управления

Вы увидите QR-код, который можно отсканировать через приложение Expo Go на вашем смартфоне (Android или iOS). Приложение загрузится на телефон, и все ваши изменения будут появляться почти мгновенно.

Если вы используете React Native CLI, процесс отличается: потребуется установить Android Studio и Xcode, настроить эмуляторы — это немного сложнее, но дает больше гибкости в будущем.

Компоненты в React Native

В React Native “строительными блоками” интерфейса являются компоненты. Они похожи на компоненты React, но для построения интерфейса используются специальные нативные примитивы.

Пример простого компонента

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

// Создаем простой компонент с "Hello, world!"
const App = () => {
  return (
    <View>
      <Text>Привет, мир!</Text>
    </View>
  );
};

export default App;

Здесь:

• View — нативный аналог div из HTML, контейнер для других элементов.
• Text — блок для вывода текста (использовать вместо обычного HTML-тега p или span).

Стилизация компонентов

Стили применяются через объектный синтаксис, похожий на inline-стили в React, но их желательно выносить через StyleSheet.

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#EFEFEF', // Цвет фона
  },
  text: {
    fontSize: 24,
    color: '#2c3e50',
  },
});

const App = () => (
  <View style={styles.container}>
    <Text style={styles.text}>Стилизованный текст</Text>
  </View>
);

// Здесь мы определили два стиля: для контейнера и самого текста.
// Обратите внимание, что свойства пишутся в формате camelCase.

Основные компоненты React Native

React Native предоставляет набор стандартных компонентов для пользовательского интерфейса. Вот самые часто используемые:

View

Контейнер для других компонентов. Используется для компоновки, позиционирования и стилизации.

<View style={{ padding: 20 }}>
  <Text>Внутри View</Text>
</View>

Text

Для вывода текста. Важно: в React Native текст всегда должен быть внутри компонента Text, а не просто написан между тегами!

<Text>Это надпись</Text>

Image

Для отображения изображений.

import { Image } from 'react-native';

<Image source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
       style={{ width: 40, height: 40 }} />

Здесь мы выводим картинку по URL и задаем размеры через style.

ScrollView

Контейнер для прокручиваемого содержимого.

import { ScrollView, Text } from 'react-native';

<ScrollView>
  <Text>Строка 1</Text>
  <Text>Строка 2</Text>
  {/* Много текста или других компонентов */}
</ScrollView>

TextInput

Поле для ввода данных пользователем.

import { TextInput } from 'react-native';

<TextInput
  placeholder="Введите имя"
  style={{ borderWidth: 1, padding: 5, margin: 10 }}
/>

Button

Простейшая кнопка. Возвращает callback при нажатии.

import { Button } from 'react-native';

<Button
  title="Нажми меня"
  onPress={() => alert('Привет!')}
/>

При нажатии отображается всплывающее сообщение.

Навигация между экранами

Большинство мобильных приложений состоит из множества экранов. Для переключения между ними обычно используют библиотеку react-navigation.

Пример простой навигации

1. Установите пакет:

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

2. Для работы со стековой навигацией также нужен пакет:

npm install @react-navigation/native-stack

3. Используйте навигацию в коде:

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

const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Главная страница</Text>
      <Button
        title="Перейти на Второй экран"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View>
      <Text>Это второй экран</Text>
    </View>
  );
}

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

// Здесь создается навигация по стеку: переход с главной на другой экран и обратно.

Управление состоянием

React Native использует те же подходы к состоянию, что и обычный React. Для хранения состояния применяйте хук useState:

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

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

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

export default Counter;

Для более сложных задач часто используют библиотеки управления состоянием: MobX, Redux или Context API из самого React.

Работа с платформами и доступ к нативным возможностям

Одна из сильных сторон React Native — доступ к нативным функциям устройства: камере, геолокации, Bluetooth и другим.

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

expo install expo-location

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

import * as Location from 'expo-location';

async function getLocation() {
  // Запрашиваем разрешение на доступ к геолокации
  let { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') {
    // Доступ не разрешен
    return;
  }

  let location = await Location.getCurrentPositionAsync({});
  console.log(location);
}

Работа с REST API

В реальных проектах данные почти всегда поступают с сервера. Для работы с HTTP-запросами удобно использовать fetch или axios.

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

const ApiExample = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => setData(json));
  }, []);

  return (
    <View>
      <Text>{data ? data.title : 'Загрузка...'}</Text>
    </View>
  );
};

export default ApiExample;
// fetch возвращает промис, его результат мы сохраняем в состоянии и выводим на экран.

Подключение внешних библиотек

React Native поддерживает npm-пакеты, как и обычный React. Для работы с иконками, форматированием дат, анимациями используйте стандартные библиотеки.

Пример подключения значков:

npm install react-native-vector-icons

А для сложных анимаций — библиотека Reanimated:

npm install react-native-reanimated

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

Сборка приложения для магазинов

Когда приложение готово, его можно собрать в установочные файлы для Android (APK, AAB) и iOS (IPA). Для этого понадобятся нативные инструменты: Android Studio и Xcode. С помощью Expo процесс можно упростить:

expo build:android
expo build:ios

После этого полученные файлы загружаются в Google Play или App Store через соответствующие консоли выкладки.

Кастомные нативные модули

Если нужен доступ к функциям устройства, которых нет в стандартном наборе, React Native позволяет создать собственный модуль на Java/Swift/Obj-C и “подключить” его в JS-код. Это называется “bridge”.

Создание bridge — более сложная тема, требующая понимания нативной разработки, но она позволяет интегрировать самые разные возможности в ваше приложение.

Особенности и ограничения React Native

• Не все нативные компоненты и функции доступны “из коробки” — иногда приходится писать обертки к нативным модулям.
• Возможно потребуется оптимизация производительности, особенно в сложных UI или анимациях.
• Некоторые обновления платформ могут требовать ручной миграции кода и зависимостей.

Впрочем, для большинства мобильных приложений React Native отлично справляется с задачей: быстро, кроссплатформенно и современно.

Заключение

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

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

React Native - это не просто фреймворк, это целая экосистема, требующая глубокого понимания различных аспектов разработки. Чтобы ускорить свой профессиональный рост и избежать распространенных ошибок, советуем обратить внимание на курс React Native и Expo Router. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир React Native прямо сегодня.

Частозадаваемые технические вопросы по теме статьи и ответы на них

1. Как добавить поддержку Push-уведомлений в React Native?

Добавьте библиотеку, например, @react-native-firebase/messaging или воспользуйтесь Expo Notifications (expo install expo-notifications). Для bare workflow настройте natively, добавьте ключи Firebase и настройте разрешения в Xcode/AndroidManifest.xml. Для Expo выполните настройку через личный кабинет Expo.

2. Почему не отображаются изображения, хотя путь указан правильно?

Проверьте, используете ли вы абсолютный путь или относительный (require('./img/logo.png')). Для изображений из сети правильно указывать объект вида { uri: 'https://...' }. Также предварительно убедитесь, что нет опечаток в расширении файла.

3. Как подключить собственный шрифт?

Добавьте файл шрифта в ваш проект (обычно папка assets/fonts). Для Expo внесите путь в app.json в поле assets, затем выполните команду expo install expo-font и используйте хук useFonts. Для bare React Native используйте react-native link или настройте вручную.

4. Как добавить локализацию (мультиязычность)?

Установите библиотеку, например, react-i18next или i18n-js. Настройте файлы переводов, создайте словари для нужных языков и интегрируйте контекст переключения языка. Вызывайте нужные переводы через функцию t('key').

5. Как оптимизировать производительность списка с большим количеством элементов?

Используйте компонент FlatList вместо обычного ScrollView — он лениво рендерит только видимые элементы, что значительно ускоряет прокрутку и снижает потребление памяти. Передавайте уникальный ключ через свойство keyExtractor.