РекомендуетсяReact Native

React Native: компоненты, типы и платформенный профиль

Опишите платформенный профиль приложения до добавления экранов: версии React Native/Expo, навигацию, JS/TS-проверку и границу native-кода. Компонент использует native primitives и явные props, а платформенные различия локализованы.

Опубликовано 13 ноября 2026 г.Проверено 13 ноября 2026 г.Изменено 13 ноября 2026 г.

Скачать Markdown Предложить изменение на GitHub Предложить правку

Плохо

export function OrderScreen(props: any) {
  return <div onClick={() => window.location.href = '/pay'}>
    {props.title}
  </div>; // DOM API ошибочно считается частью iOS/Android runtime.
}

Хорошо

import { Pressable, Text } from 'react-native';
 
type OrderCardProps = {
  title: string;
  onSelect: () => void;
};
 
export function OrderCard({ title, onSelect }: OrderCardProps) {
  return (
    <Pressable accessibilityRole="button" onPress={onSelect}>
      <Text>{title}</Text>
    </Pressable>
  );
}

Почему это важно

React Native рендерит платформенные компоненты, а не DOM браузера. Сборщик может преобразовать TypeScript без проверки типов; успешный JS bundle не подтверждает корректность native-интеграции.

Когда применять

iOS/Android React Native; пример предполагает TypeScript-профиль. Зафиксируйте точные React/React Native, поддерживаемые OS, native build tools и, при использовании, Expo SDK/Router. Expo и собственные native-проекты допустимы; способ обновления native-файлов и конфигурации должен быть один и понятный.

Новые компоненты/экраны называются PascalCase, hooks — useCamelCase, обычные функции — camelCase по принятому JS/TS-профилю. JSX хранится в .tsx, не-JSX типизированный код — в .ts; JS допустим в существующем согласованном профиле. Не добавляйте any для скрытия несовместимого native API.

Небольшое различие оформляйте через Platform, значительное — файлами .ios/.android с одинаковым публичным интерфейсом. Сборка должна выбирать реализацию на каждой целевой платформе. Навигационные params описываются в выбранном роутере, а внешняя deep link проходит отдельную проверку.

Общий код не предполагает наличие window/document/localStorage. Обработчик Pressable не хранит секрет, а текст расположен в Text. Типы проверяются отдельным инструментом профиля, кроме преобразования Metro/Babel; реальный release build проверяет зависимости и permissions. UI-тест в JS не подтверждает обе native-платформы.

Кто что делает

Человек

Выбирает поддерживаемые платформы, навигацию и Expo/native workflow.

AI-агент

Проверяет props и обе реализации, отделяет typecheck от транспиляции и native build.

Как проверить у себя

Вход и действие	Ожидаемый результат	Свидетельство
Card получает title и onSelect на iOS/Android	Отображается Text, нажатие вызывает callback один раз	Component/device checks
Неверный prop или неподдерживаемый DOM API	Ошибка найдена типовой проверкой/сборкой	Typecheck и bundle
Разные .ios/.android реализации	Обе выбраны корректно и имеют один контракт	Сборка/тест двух платформ
Новый native-модуль или permission	Изменен и проверен native build, не только JS bundle	Release build и device smoke

Baseline проекта включает выбранные версии; этот документ не обещает совместимость произвольного SDK с последним React Native.

Первоисточники

История изменений на GitHub

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