Как скрыть NavBar моего веб-сайта при использовании на мобильных устройствах с помощью reactjs?

Я создаю веб-сайт с помощью reactjs и хочу добиться чего-то вроде Instagram. Поэтому, когда пользователь получает доступ к этому веб-сайту на ПК, он должен видеть панель навигации, а если пользователь получает доступ к нему на своем телефоне, он должен видеть навигацию по нижней вкладке, а панель навигации должна быть скрыта. Я также прикрепляю свои фотографии дизайна настольного и мобильного пользовательского интерфейса, чтобы вы, ребята, могли лучше понять. Кроме того, я не использую какую-либо библиотеку пользовательского интерфейса, а просто простые реакции. /i.stack.imgur.com/PT8vz.jpg" alt="Мобильный интерфейс">

интерфейс рабочего стола


reactjs create-react-app javascript react-redux
person Neha Sharma    schedule 09.09.2018    source источник
comment
Создайте две версии панелей навигации, одну для рабочего стола и другую для мобильных устройств. Используйте медиа-запросы, чтобы скрыть в соответствии с размером экрана.   -  person Ashish Jhanwar    schedule 09.09.2018
comment
@AshishJhanwar Должен ли я создать отдельный компонент панели навигации для обоих и импортировать их в свой app.js? Если да, то где я должен использовать медиа-запросы?   -  person Neha Sharma    schedule 09.09.2018
comment
Ага. Создайте один базовый компонент, который имеет все функции управления (например, переход на другую вкладку при щелчке значка), расширите два компонента исключительно пользовательского интерфейса из базовых компонентов.   -  person Ashish Jhanwar    schedule 09.09.2018
comment
@AshishJhanwar и медиа-запросы? В каком файле я должен его использовать? App.js или app.css?   -  person Neha Sharma    schedule 09.09.2018

Ответы (2)


arrow_upward
0
arrow_downward

Вместо того, чтобы поступать каким-либо другим способом, я бы порекомендовал вам использовать медиа-запрос CSS. Это сделает вашу жизнь легкой. Вам просто нужно указать, какую часть кода вы хотите скрыть. Предположим, что класс вашей панели навигации затем просто помещается, как показано ниже, в медиа-запрос и помещает CDN начальной загрузки на вашу страницу. то есть

 @media query("Size for what you want to hide navbar)(i.e. 480px or 320px)
          .nav {
               visibility; hidden;
           }
person Chiragkumar Maniar    schedule 09.09.2018
comment
Замечательно! Могу ли я также использовать чистый Bootstrap только для отзывчивости? Мне не нужен jQuery, потому что меню, такое как drop, может быть разработано в самой реакции. - person Neha Sharma; 09.09.2018
comment
Да. Вы можете использовать чистый бутстрап и комбинацию CSS для достижения отзывчивости. Не только для настольных компьютеров, но и для мобильных устройств, которые вы можете использовать для планшетов и iPad. И подходя ко второму пункту проблемы jQuery. Это также можно решить с помощью самого бутстрапа. Это сделает ваш код менее и легко читаемым. Как вы просто должны упомянуть встроенные функции. - person Chiragkumar Maniar; 09.09.2018
comment
Спасибо! Существуют ли какие-либо учебные пособия для тех же или некоторых документов по установке информации о начальной загрузке. На простом веб-сайте HTML мы просто загружаем файл начальной загрузки и импортируем его в формате html. Но не знаете, как мне реализовать реакцию? - person Neha Sharma; 09.09.2018
comment
У вас просто есть указанная ниже строка кода в вашей HTML-головке и больше ничего. Если вы подключены к Интернету. В противном случае вы можете обратиться к официальному сайту bootstrap. - person Chiragkumar Maniar; 09.09.2018
comment
На самом деле из-за ограничений по количеству символов в комментариях я не могу их здесь разместить. Но упоминание веб-сайта, откуда просто скопируйте строки CDN и вставьте его в свою ‹head›‹/head›, и все готово. getbootstrap.com/docs/3.3/getting-started - person Chiragkumar Maniar; 09.09.2018

arrow_upward
0
arrow_downward

Самым простым решением для этого было бы иметь две версии навигационных панелей.

Nav и NavMobile.

Вы можете использовать медиа-запросы css, чтобы скрыть/показать их в соответствии с минимальным/максимальным размером экрана, это одна из наиболее распространенных практик.

person Ashish Jhanwar    schedule 09.09.2018
comment
Итак, я должен создать 2 отдельных компонента панели навигации для большого и маленького экрана и импортировать их в свой app.js? Если да, то где я должен использовать медиа-запросы? - person Neha Sharma; 09.09.2018
comment
В настольной версии используйте медиа-запросы, чтобы скрыть навигацию, если размер экрана меньше определенной ширины (максимальная ширина: 720 пикселей), например, а в мобильной — скрыть, когда экран больше определенной ширины (минимальная ширина: 719 пикселей) для пример. - person Ashish Jhanwar; 09.09.2018
comment
Медиа-запросы должны быть в файлах css вашего компонента, а не в глобальном файле css, инкапсуляция важна для предотвращения конфликтов. - person Ashish Jhanwar; 09.09.2018