Как работает React Native

React Native работает за счёт взаимодействия между JavaScript-кодом и нативной частью мобильного приложения. В отличие от веб-приложений, где браузер интерпретирует HTML и CSS, в React Native UI строится из настоящих нативных компонентов, управляемых через JavaScript.

Архитектура: мост (Bridge)

Основной элемент архитектуры — мост (Bridge). Это асинхронный канал связи между двумя средами:

  • JavaScript-поток: здесь выполняется ваш код на JS/TS, включая логику компонентов, состояние и эффекты.
  • Нативный поток: здесь работают UI-компоненты операционной системы (например, UIView на iOS или View на Android).

Когда вы изменяете состояние в компоненте, React Native не обновляет DOM. Вместо этого он формирует «инструкции» (diff-дерево), отправляет их через мост, и нативная сторона создаёт или обновляет соответствующие нативные виджеты.

Примечание: в новых версиях React Native (начиная с 0.68+) появилась архитектура Fabric, которая устраняет мост и позволяет синхронизировать потоки напрямую. Но для начала достаточно понимать классическую модель с мостом.

Нативные компоненты вместо HTML

В React Native нет HTML. Все элементы интерфейса — это обёртки над нативными компонентами:

  • <View> → контейнер (аналог <div>)
  • <Text> → текстовый элемент (обязателен для отображения текста)
  • <Image> → изображение
  • <ScrollView>, <FlatList> → прокручиваемые списки

Пример:

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

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Привет из React Native!</Text>
    </View>
  );
}

Этот код создаст нативное окно с центрированным текстом — без единого пикселя WebView.

Стили: подмножество CSS

Стилизация в React Native напоминает inline-стили в вебе, но с ограничениями:

  • Свойства записываются в camelCase (backgroundColor, а не background-color)
  • Нет наследования стилей: каждый <Text> должен иметь собственные стили
  • Поддерживается только часть CSS: flexbox, padding/margin, цвета, шрифты, тени — да; медиа-запросы, псевдоклассы, селекторы — нет
  • Стили объявляются как объекты или с помощью StyleSheet.create() для оптимизации

Пример:

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Заголовок</Text>
    </View>
  );
}

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