📱

building-native-ui

Name: building-native-ui
Author: expo

آمن ⚙️ الأوامر الخارجية🌐 الوصول إلى الشبكة📁 الوصول إلى نظام الملفات

Создание нативного iOS UI с Expo Router

Создание нативных iOS приложений требует понимания соглашений Expo Router, рекомендаций Apple Human Interface Guidelines и платформенно-специфичных API. Этот навык предоставляет комплексное руководство по созданию отполированных нативных интерфейсов с правильными паттернами навигации, анимациями и нативными элементами управления.

يدعم: Claude Codex Code(CC)

⚠️ 66 ضعيف

تنزيل ZIP المهارة

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

فعّل وابدأ الاستخدام

اختبرها

استخدام "building-native-ui". Create a settings screen with a form

النتيجة المتوقعة:

Навык генерирует файл маршрута настроек с правильным ScrollView, полями ввода с использованием паттернов expo-text-input и правильной интеграцией haptics для элементов переключения.

استخدام "building-native-ui". Add search to the navigation header

النتيجة المتوقعة:

Навыг создает конфигурацию headerSearchBarOptions с правильной интеграцией хука поиска и паттернами фильтрации для списка данных.

استخدام "building-native-ui". Create a detail screen with liquid glass effect

النتيجة المتوقعة:

Навыг генерирует презентацию form sheet с expo-glass-effect для фона и правильной стилизацией прозрачного контента для iOS 26+.

التدقيق الأمني

آمن

v2 • 1/23/2026

All 614 static findings are false positives. This is legitimate Expo documentation containing code examples for building native iOS apps. The scanner incorrectly flagged documentation patterns including CLI command examples (npx expo), CSS color values (rgba), and regex patterns as security issues. No malicious code present.

الملفات التي تم فحصها

3,329

الأسطر التي تم تحليلها

النتائج

إجمالي عمليات التدقيق

مشكلات متوسطة المخاطر (5)

SKILL.md:30 references/animations.md:9-25 references/controls.md:9-16 references/tabs.md:9-35

Documentation Code Examples Misidentified as Shell Commands

The static scanner flagged 547 instances of 'Ruby/shell backtick execution' in markdown files. These are legitimate code examples showing CLI commands like `npx expo start` and `npx expo run:ios` in documentation. The backticks are markdown code formatting, not shell execution.

SKILL.md:131 SKILL.md:293 references/controls.md:130

CSS Color Values Misidentified as Cryptographic Patterns

The scanner flagged 'weak cryptographic algorithm' on CSS color values like `rgba(0, 0, 0, 0.05)` and regex patterns like `match(/\((.*)\)/)`. These are standard CSS and JavaScript patterns for styling and string parsing, not cryptographic operations.

references/storage.md:5-16 references/storage.md:23-40

Storage API Documentation Misidentified as Security Risk

The scanner flagged references to AsyncStorage, SecureStore, and SQLite as 'sensitive data access'. These are legitimate Expo storage APIs being documented for app data persistence patterns.

SKILL.md:32

Template Injection Heuristic False Positive

The scanner flagged line 32 as 'template injection targeting system prompt'. This line reads: 'Start with Expo Go: Run `npx expo start` and scan the QR code with Expo Go' - pure documentation text.

SKILL.md:1-315

Heuristic Alert Triggered by Documentation Patterns

Critical heuristic alerts flagged 'dangerous combination: code execution + network + credential access'. These patterns co-occur because the documentation covers complete app development including networking (expo-camera, expo-media-library) and storage (SecureStore) - standard mobile app patterns.

مشكلات منخفضة المخاطر (2)

SKILL.md:81

Environment Variable Reference Documentation

Line 81 documents `process.env.EXPO_OS` for platform detection. This is the recommended Expo pattern for environment-aware rendering.

references/icons.md:204 references/media.md:86

Hardcoded URL References in Documentation

URLs like documentation links and API endpoints appear in the documentation. These are reference examples, not external network calls.

عوامل الخطر

⚙️ الأوامر الخارجية (3)

SKILL.md:30 references/animations.md:9-25 references/controls.md:9-16

🌐 الوصول إلى الشبكة (2)

references/icons.md:204 references/media.md:86

📁 الوصول إلى نظام الملفات (1)

SKILL.md:268

تم تدقيقه بواسطة: claude عرض سجل التدقيق →

درجة الجودة

الهندسة المعمارية

100

قابلية الصيانة

المحتوى

المجتمع

الأمان

الامتثال للمواصفات

ماذا يمكنك بناءه

Настройка нового проекта Expo iOS

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

Рефакторинг и полировка UI

Улучшите существующие приложения Expo с помощью правильных анимаций, нативных элементов управления и рекомендаций по дизайну iOS для более отполированного вида.

Обзор архитектуры навигации

Проектируйте паттерны навигации с использованием общих групповых маршрутов, динамических экранов и правильной организации файлов маршрутов.

جرّب هذه الموجهات

Создать новый экран

Create a new Expo Router screen at app/settings/profile.tsx that follows our app conventions. Use a ScrollView with contentInsetAdjustmentBehavior="automatic", add entering and exiting animations, and follow Apple Human Interface Guidelines for the layout.

Добавить паттерн навигации

Add a Stack navigation structure to app/(feed)/_layout.tsx with a transparent header, large title, and proper safe area handling. Include a link preview and context menu for the main list screen.

Реализовать анимацию

Add a scroll-driven animation to the main list using Reanimated v4. The header should fade out when scrolling down and reappear when scrolling up. Use useScrollViewOffset for the animation values.

Сложный макет навигации

Create a shared group route structure in app/(index,search)/ that allows both tabs to push common detail screens. Use NativeTabs for the bottom navigation with SF Symbols icons. Include proper type definitions for the route parameters.

أفضل الممارسات

Всегда используйте ScrollView с contentInsetAdjustmentBehavior="automatic" вместо SafeAreaView для адаптивных макетов, которые корректно обрабатывают safe areas
Используйте NativeTabs с иконками SF Symbols для iOS таб-баров вместо JavaScript-реализаций табов
Применяйте анимации входа и выхода для всех переходов между экранами с помощью Reanimated v4 для плавного нативного ощущения

تجنب

Никогда не используйте встроенные HTML-элементы вроде div или img вне вебвью - всегда используйте компоненты React Native
Никогда не размещайте компоненты в директории app - храните файлы маршрутов чистыми и выносите компоненты в отдельную папку components
Никогда не используйте устаревшие модули React Native вроде Picker, WebView или SafeAreaView - используйте их современные аналоги

الأسئلة المتكررة

Когда следует использовать npx expo run:ios вместо Expo Go?

Используйте кастомные сборки только когда вам нужны локальные нативные модули, Apple-виджеты или нативные модули третьих сторон, не доступные в Expo Go. Для большинства приложений Expo Go обеспечивает более быструю итерацию и работает без Xcode.

Как создать общие маршруты между вкладками в Expo Router?

Используйте групповые маршруты со скобками, например app/(index,search)/, для общих экранов между вкладками. Обе вкладки могут открывать экраны, определенные в общей группе, сохраняя при этом отдельные стеки навигации.

Какую библиотеку анимаций следует использовать для iOS?

Используйте Reanimated v4 для всех анимаций, включая вход, выход, layout и scroll-driven анимации. Избегайте встроенного Animated API React Native для новой разработки.

Как реализовать поиск в Expo Router?

Используйте headerSearchBarOptions в опциях Stack.Screen для нативных поисковых строк iOS. Объедините с хуком useSearch и правильными паттернами фильтрации в вашем слое данных.

Какой правильный способ обработки safe areas?

Используйте ScrollView или FlatList с contentInsetAdjustmentBehavior="automatic" вместо SafeAreaView. Это автоматически обрабатывает верхние и нижние safe areas на всех версиях iOS.

Как добавить контекстные меню к ссылкам?

Используйте Link.Trigger для области нажатия, Link.Menu для контекстных действий и Link.Preview для iOS-стильных превью. Добавьте их для улучшения навигации на поддерживаемых устройствах.