Первые 5 минут: Быстрая диагностика и локализация проблемы. Не начинайте с хаотичного изменения кода. Сначала четко сформулируйте симптом: приложение падает при запуске? Не отображается какой-то компонент? Происходит задержка (lag) в анимации? Определите, на какой платформе проявляется проблема (iOS, Android или обе). Запустите приложение в режиме отладки. Для iOS используйте `npx react-native run-ios`, для Android — `npx react-native run-android`. Откройте терминал с метропом (Metro bundler) — он часто показывает первые ключевые ошибки компиляции или синтаксиса. Одновременно откройте консоль браузера (Chrome DevTools), если включена удаленная отладка.
Минуты 5-15: Анализ ошибок в консолях и логах. React Native предоставляет несколько потоков логов. Metro Bundler Console: показывает ошибки сборки JavaScript, отсутствующие модули. Если здесь есть красные сообщения — начните с них. Консоль приложения: используйте `console.log`, `console.warn`, `console.error` в коде. Для их просмотра либо включите удаленную отладку (Debug → Open Debugger) и смотрите вкладку Console в Chrome DevTools, либо используйте standalone-инструменты вроде React Native Debugger или Flipper. Нативные логи: для сложных сбоев, особенно связанных с нативными модулями, нужны логи платформы. Для Android используйте `adb logcat *:E` или `adb logcat | grep "ReactNative"`. Для iOS — Console.app на Mac или `xcrun simctl spawn booted log stream --level debug` для симулятора. Ищите `Exception`, `Fatal`, `Error`.
Минуты 15-25: Глубинная отладка компонентов и состояния. Если приложение запускается, но работает некорректно (неправильный UI, не отвечает на действия), переходите к инспекции компонентов. Установите и используйте Flipper от Facebook — это самый мощный инструмент для отладки React Native. Он показывает дерево компонентов (React DevTools), журнал сетевых запросов (Network Inspector), базу данных (например, AsyncStorage), логи (Logs) и производительность (Layout, Images). С его помощью можно проверить пропсы (props) и состояние (state) каждого компонента, найти тот, который не перерисовывается или имеет неожиданные данные. Альтернатива — React DevTools standalone. Если проблема в стилях, используйте встроенный инспектор: встряхните устройство (или нажмите `Cmd+D` / `Ctrl+M` в симуляторе) и выберите "Show Inspector". Это подсветит элементы и покажет их свойства.
Минуты 25-30: Целевые проверки и быстрые фиксы. К этому моменту вы должны сузить круг возможных причин. Выполните целевые проверки: Проблема с нативным модулем? Убедитесь, что для iOS выполнен `pod install`, для Android — `./gradlew clean`. Проблема с производительностью? Включите индикатор производительности (в меню отладки "Show Perf Monitor") и проверьте, не "проседает" ли JS-кадровая частота (FPS). Проблема с обновлением? Попробуйте очистить кеш Metro: `npx react-native start --reset-cache`. Проблема с данными? Проверьте обработку промисов (Promise) и асинхронных функций на предмет необработанных ошибок с помощью `.catch()`.
Бонус: Чек-лист самых частых "30-минутных" проблем и их решений:
- "Метро не подключается к устройству": проверьте, что устройство и компьютер в одной сети, отключите файрволл, попробуйте `adb reverse tcp:8081 tcp:8081` для Android.
- "Белый экран после запуска": чаще всего ошибка в `index.js` или основном компоненте. Смотрите логи Metro.
- "Неизвестная ошибка resolveModule": выполните `watchman watch-del-all && rm -rf node_modules && npm install`.
- "Приложение падает на старте на iOS": вероятно, проблема с нативными зависимостями. Выполните `cd ios && pod install --repo-update`.
- "Стили выглядят по-разному на iOS и Android": используйте `Platform.select()` для платформо-специфичных стилей.
Комментарии (5)