Навыки react-native-architecture
📦

react-native-architecture

Безопасно ⚙️ Внешние команды🌐 Доступ к сети

Создание готовых к производству приложений на React Native

Также доступно от: wshobson

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

Поддерживает: Claude Codex Code(CC)
🥉 73 Бронза
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «react-native-architecture». Create an auth provider with route protection

Ожидаемый результат:

AuthContext с использованием SecureStore для токена, хук useAuth, защита маршрутов с проверкой сегментов, перенаправление на логин при неавторизованном доступе

Использование «react-native-architecture». Set up offline-first React Query

Ожидаемый результат:

QueryProvider с персистером AsyncStorage, networkMode: offlineFirst, gcTime: 24 часа, staleTime: 5 минут

Использование «react-native-architecture». Configure EAS build for iOS

Ожидаемый результат:

eas.json с профилями development, preview и production. Development использует симулятор, preview использует внутреннее распространение, production включает autoIncrement

Аудит безопасности

Безопасно
v1 • 2/24/2026

Security audit complete. Static findings are false positives triggered by documentation examples containing terminal commands (npx, eas), documentation URLs (official Expo/React Native sites), and example configuration paths. No actual code execution, network requests to external domains, or real credentials present. Skill is a legitimate React Native architecture guide with safe-to-use code patterns.

2
Просканировано файлов
707
Проанализировано строк
2
находки
1
Всего аудитов

Факторы риска

⚙️ Внешние команды (2)
resources/implementation-playbook.md:50-58 resources/implementation-playbook.md:608-633
🌐 Доступ к сети (1)
resources/implementation-playbook.md:667-670
Проверено: claude

Оценка качества

38
Архитектура
100
Сопровождаемость
87
Контент
33
Сообщество
100
Безопасность
100
Соответствие спецификации

Что вы можете построить

Запуск нового мобильного проекта

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

Реализация потока аутентификации

Добавление безопасной аутентификации с защитой маршрутов, хранением токенов через SecureStore и защищёнными путями навигации.

Добавление слоя данных офлайн-first

Реализация постоянного кэширования данных с синхронизацией React Query и AsyncStorage, а также оптимистичных обновлений UI.

Попробуйте эти промпты

Инициализация проекта Expo 
Создайте новый проект Expo с TypeScript. Настройте структуру папок с директориями app/, components/, hooks/, services/, stores/ и types/. Включите Expo Router с группами auth и tabs.
Добавление аутентификации 
Реализуйте поток аутентификации в приложении React Native с использованием SecureStore для хранения токенов. Создайте контекст аутентификации с состояниями signIn, signOut и user. Добавьте защиту маршрутов для вкладок от неавторизованного доступа.
Настройка офлайн-синхронизации 
Настройте React Query с персистером AsyncStorage для данных офлайн-first. Включите определение состояния сети через NetInfo и настройте stale times и логику повторных попыток для продакшена.
Интеграция нативных функций 
Добавьте биометрическую аутентификацию с expo-local-authentication, push-уведомления с expo-notifications и тактильную обратную связь с expo-haptics. Создайте чистую абстракцию сервиса для каждого.

Лучшие практики

  • Используйте файловую маршрутизацию Expo Router с группами для разделения auth и tabs
  • Используйте мемоизацию компонентов и FlashList для длинных списков для поддержания 60fps
  • Храните токены и конфиденциальные данные в SecureStore, никогда не используйте для этого AsyncStorage

Избегать

  • Хранение токенов или секретов в открытом виде в AsyncStorage вместо SecureStore
  • Использование inline-стилей вместо StyleSheet.create для производительности
  • Получение данных непосредственно в рендере компонента без useEffect или React Query

Часто задаваемые вопросы

В чём разница между Expo и Bare React Native?
Expo предоставляет управляемые рабочие процессы с более простой настройкой и встроенными OTA-обновлениями. Bare React Native даёт прямой доступ к нативному коду, но требует более сложной настройки и ручного нативного связывания.
Могу ли я использовать этот навык с React Native CLI?
Паттерны ориентированы на Expo Router и библиотеки Expo. Некоторые паттерны, такие как навигация и управление состоянием, применимы к bare React Native, но примеры нативных модулей используют пакеты Expo.
Как обрабатывать офлайн-режим в React Native?
Используйте React Query с режимом сети offlineFirst и персистером AsyncStorage. QueryClient будет возвращать кэшированные данные в офлайн-режиме и синхронизировать мутации при восстановлении соединения.
Что такое Expo Router?
Expo Router — это решение для файловой маршрутизации в приложениях React Native. Оно использует структуру папок в app/ для определения маршрутов, аналогично страницам Next.js или директории App.
Как безопасно хранить токены аутентификации?
Используйте expo-secure-store, который хранит данные в iOS Keychain или Android Keystore. Никогда не используйте AsyncStorage для конфиденциальных данных, так как они не зашифрованы.
Что такое EAS?
EAS (Expo Application Services) предоставляет облачные сборки, обновления и отправки. EAS Build компилирует приложения в облаке, EAS Update доставляет JS-обновления OTA, а EAS Submit обрабатывает загрузки в магазины приложений.

Сведения для разработчиков

Автор

sickn33

Лицензия

MIT

Репозиторий

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-native-architecture

Ссылка

main

Структура файлов

📁 resources/

📄 implementation-playbook.md

📄 SKILL.md