Словами самого skill
Этот скилл обучает паттернам стилизации React Native, React Navigation 6+ и Reanimated 3 для создания кросс-платформенных мобильных приложений. Он охватывает StyleSheet и styled-components для стилизации, адаптивные макеты для разных размеров экрана, платформо-специфичные дизайны для iOS и Android, жестовые взаимодействия с Gesture Handler и техники оптимизации производительности.
Скилл фокусируется на создании пользовательского опыта нативного качества с анимациями на 60fps, выполняемыми на UI-потоке, корректными типовыми определениями навигации и практиками тестирования на реальных устройствах.
Что он выдаёт
- Компоненты React Native с интерфейсами TypeScript, определениями StyleSheet и анимациями Reanimated
- Анимированные компоненты с использованием Reanimated 3, useSharedValue и useAnimatedStyle для производительности 60fps
Как это работает
- 01Стилизация с помощью StyleSheet
Определяйте стили компонентов с помощью StyleSheet.create вместо инлайновых стилей для лучшей производительности.
- 02Создание навигации с типизированными маршрутами
Реализуйте навигацию с помощью React Navigation 6+ с определениями типов TypeScript ParamList для всех навигаторов, чтобы обеспечить типобезопасность на всех экранах.
- 03Анимация в UI-потоке
Создавайте производительные анимации с помощью воркетов Reanimated 3, которые выполняются в UI-потоке, используя useSharedValue и useAnimatedStyle для достижения 60 кадров в секунду.
- 04Обработка жестов с помощью GestureDetector
Реализуйте взаимодействия на основе жестов с помощью Gesture Handler, оборачивая жесты в GestureDetector и используя simultaneousHandlers для разрешения конфликтов.
- 05Оптимизация рендеринга
Используйте React.memo и useCallback, чтобы избежать ненужных перерисовок. Для списков всегда используйте FlatList вместо ScrollView с map.