Основные ограничения

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

Отсутствие DOM и веб-API

В React Native нет DOM, а значит недоступны привычные веб-объекты:

  • window
  • document
  • navigator (в полном объёме)
  • localStorage, sessionStorage

Попытка использовать их вызовет ошибку выполнения. Например, код:

console.log(window.innerWidth); // Ошибка: window is not defined

не сработает, потому что мобильное приложение не работает внутри браузера.

Замена браузерных API

Для задач, решаемых в вебе через стандартные API, в React Native используются альтернативы:

  • Хранение данных: вместо localStorage применяется AsyncStorage (или более современные решения вроде expo-sqlite или MMKV).

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

await AsyncStorage.setItem('token', 'abc123');
const token = await AsyncStorage.getItem('token');

  • Сетевые запросы: fetch и XMLHttpRequest работают, так как они реализованы в JavaScript-движке (Hermes или JSC).

  • Геолокация, камера, сенсоры: доступны через специализированные библиотеки, например, из Expo SDK (expo-location, expo-camera).

Ограниченная система стилей

Стилизация в React Native основана на подмножестве CSS, но с важными отличиями:

  • Поддерживается только Flexbox как основной механизм компоновки.
  • Нет каскада, наследования и селекторов — стили применяются только к конкретному компоненту.
  • Многие CSS-свойства отсутствуют: float, position: fixed, z-index (частично), медиа-запросы.
  • Все размеры по умолчанию задаются в логических пикселях (points), а не в физических.

Пример того, что не работает:

// Нельзя так:
<Text style={{ color: 'inherit' }}>Текст</Text>  // нет наследования
<View className="container" />                   // нет class / CSS-файлов

Вместо этого всё оформляется через объекты стилей:

// Правильно:
<Text style={{ color: '#333', fontSize: 16 }}>Текст</Text>

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