Не хотите тратить свое время на бла-бла-бла? Нажмите здесь - › react-mobile-app

Моя история началась с игрового приложения

Конечно, мы знаем о возможных способах управления мобильными приложениями.

  1. CSS медиа-запросы
  2. JS-библиотеки с мобильным детектором внутри

А что с ними не так?

Медиа-запросы

Вы видели действительно большое приложение с media-queries внутри? У меня был опыт с этим, и это выглядело как спагетти-код. Когда ваше решение увеличивается, вы начинаете терять контроль над изменениями через некоторое время, потому что спагетти распространяются слишком быстро. Если бы у вас была команда, каждый хотел бы реализовать что-то неправильно, используя перекрытие стилей.

Иногда ваш компонент слишком отличается, и вам нужно изменить HTML-шаблон для реализации определенной функции. Причем это может быть разный JS-код для мобильных и десктопных приложений. Как это сделать только с media-queries ?

И на сцене появился JS подходы и детектор устройств.

JS детекторы

Я начал свое исследование и в поиске Google появились первые результаты

  1. Мобил-детектор (только JS)
  2. Реагировать-устройство-обнаруживать (ReactJS)

Он мне понравился, но внутри все еще есть несколько проблем.

Во-первых, это размеры библиотек.



BundlePhobia
Bundlephobia помогает определить влияние на производительность добавления пакета npm в ваш интерфейсный пакет bundlephobia.com





BundlePhobia
Bundlephobia помогает определить влияние на производительность добавления пакета npm в ваш интерфейсный пакет bundlephobia.com



Я знаю, мир жесток ... Мы могли бы закрыть на это глаза, это зависит от нас. Но для меня это решение не подошло. Он включает в себя множество пользовательских агентов и всю магию внутри, просто найдите совпадение с ним.

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

Кроме того, я не понял, как это должно выглядеть с точки зрения архитектуры.

<BrowserView>
  <h1> This is rendered only in browser </h1>
</BrowserView>
<MobileView>
  <h1> This is rendered only on mobile </h1>
</MobileView>

Опять же, для меня это похоже на спагетти ... Сколько времени нужно, чтобы превратиться в кучу хлама? Для меня процесс трансформации идет очень быстро.

Также у меня нет ответа об изменении ориентации устройства.

Были веские причины задуматься о том, как я могу с этим справиться.

React-мобильное приложение

Пример с компонентами настольного компьютера / мобильного устройства / планшета

import { mobileDetector } from 'react-mobile-app'

import { ComponentDesktop } from './Component.desktop'

import { ComponentMobilePortrait } from './ComponentMobile.portrait'
import { ComponentMobileLandscape } from './ComponentMobile.landscape'

import { ComponentTabletPortrait } from './ComponentTablet.portrait'
import { ComponentTabletLandscape } from './ComponentTablet.landscape'

export const Component = mobileDetector(
  ComponentDesktop,
  [ComponentMobilePortrait, ComponentMobileLandscape],
  [ComponentTabletPortrait, ComponentTabletLandscape]
)

Да, когда ваше устройство меняет ориентацию, mobileDetector ловит его и использует соответствующий компонент

Вы можете найти больше примеров здесь - › react-mobile-app

Также он работает с react-story-book, я нашел способ и описал в readme.md

Удачного кодирования!