Чтобы Metro Bundler отображался в хроме при работе с проектом React Native, вам необходимо внести следующие изменения:
- Убедитесь, что у вас установлен Google Chrome на компьютере. Если нет, установите его с официального сайта Chrome.
- Запустите проект React Native, перейдя в корневую папку проекта в командной строке и запустив команду
npm startилиyarn start. Это запустит Metro Bundler на порту 8081 (по умолчанию).
- Откройте Google Chrome и в адресной строке введите
http://localhost:8081. Вы должны увидеть интерфейс Metro Bundler.
- Однако вместо этого, вы, вероятно, увидите ошибку, говорящую о том, что "Этот сайт не может предоставить защищенное соединение".
- Нажмите на значок "Shield" (защита) в адресной строке Chrome. В открывшемся выпадающем меню выберите "Загрузить не защищенные скрипты". Это позволит Chrome загружать ресурсы Metro Bundler без SSL-сертификата.
- Обновите страницу или введите
http://localhost:8081в адресной строке Chrome. Теперь вы должны увидеть интерфейс Metro Bundler.
После выполнения этих шагов вы сможете видеть Metro Bundler в Chrome и использовать его для отладки, перезагрузки приложения и т.д.
Если вы не можете расширить значок "Shield" в адресной строке Chrome, проверьте, что ваше соединение с localhost не заблокировано браузером или антивирусом. Возможно, вам придется отключить временно свои защитные программы или настроить исключения для localhost.
Также обратите внимание, что в последних версиях React Native была добавлена возможность открытия Metro Bundler в Chrome автоматически. Если ваш проект React Native обновлен до последней версии, у вас может быть возможность открыть Metro Bundler в Chrome, просто перейдя по ссылке в терминале после запуска проекта.