Использование React и React Native в единой общей кодовой базе
Если вы создаете приложение для реагирования, которое намеревается иметь мобильную и веб-версию, react-native-web может быть для вас. Даже если вы не собираетесь использовать общие компоненты или стили, возможность совместного использования функций (управление состоянием, выборка и т. Д.) Является огромным преимуществом для производительности и удобства обслуживания.
В репозитории github есть хороший обзор того, что такое react-native-web, поэтому я оставлю это экспертам, но я дам вам несколько вещей, которые я узнал в процессе, которые помогли мне .
Настраивать
Я не до конца придумал, как лучше всего запустить проект. Существуют стартовые комплекты, которые, хотя я не пробовал, выглядят как лучший способ начать работу.
С учетом сказанного (и до того, как я узнал о вышеизложенном), мне нравится create-react-app, поэтому я закончил тем, что инициализировал стандартное репо реакции с этим, создал другое репо с react-native init, а затем осторожно слил их вместе с помощью слияния слияния. Все прошло нормально и работает, но потребовалось час или два, чтобы разобраться, плюс я позже отказался получить доступ к конфигурации webpack, что уменьшает преимущества использования create-react-app. В заключение я рекомендую использовать стартовый комплект, хотя подозреваю, что create-react-app на каком-то этапе полностью интегрируется в него (последняя версия поддерживает файлы .web.js).
Общие библиотеки API
react-native-web предоставляет множество общих компонентов и API, но есть некоторые, которые не охватываются другими библиотеками.
1. Хранилище: реагировать-собственное-хранилище
Кросс-платформенное хранилище немного сложно. LocalStorage браузера является синхронным, но его мобильная версия AsyncStorage, как следует из названия, является… асинхронной. Это означает, что вы не можете просто создать оболочку для использования localStorage для Интернета и AsyncStorage для остальных, потому что один возвращает фактический сохраненный объект, а другой возвращает обещание. Response-native-storage - отличное решение для этого, он превращает оба в обещания, так что вы можете вызвать хранилище из любого места и получить обратно обещание. Если вы используете redux и response-native-storage, то выучите что-нибудь вроде thunk, поскольку redux по умолчанию будет кричать на вас, если вы попытаетесь выполнять с ним асинхронные действия.
2. Навигация: ReactNavigation
ReactNavigation отлично подходит для навигации на мобильных устройствах, а также работает в сети. На самом деле я не мог заставить его работать в Интернете, и только возможность использовать маршрутизаторы, а не навигаторы, является небольшим недостатком, поэтому я жду дополнительной документации по этому поводу.
Моим промежуточным решением было использовать ReactNavigation для мобильной навигации и react-router для Интернета. Это просто означает, что каждое приложение будет помещено в его специальную библиотеку навигации и написана утилита навигации, которая будет использовать navigator(screenName) на мобильных устройствах и browserHistory.push(screenName) в Интернете. Хорошо работает, прост и удобен в настройке, а также отлично отделен от остальной части приложения.
Продуктивность
1. Горячая загрузка
Одна вещь, которую я заметил в ReactNative в целом, заключается в том, что даже если у вас есть симуляторы iOS и Android, только один будет перезагружен. Я не уверен, что это исправляется, но на данный момент есть простая работа, которая запускает сервер разработки для реагирования на двух портах (и указывает iOS на второй порт, который вы настроили), вот инструкции . Первоначально я думал, что горячая перезагрузка всех трех платформ будет отличным вариантом для разработки, но я обнаружил, что в большинстве случаев работаю только по одной платформе за раз, или в лучшем случае веб + один мобильный.
Тем не менее, я нашел применение горячей перезагрузке всех трех платформ, и именно тогда вы хотите продемонстрировать возможности этой системы. Вы можете говорить о том, насколько продуктивным является этот рабочий процесс, пока не посинете, но простое изменение строки кода и отображение всех трех приложений, изменяющихся одновременно, поможет вам понять вашу точку зрения более лаконично.
2. Загрузка среды разработки
Каждый раз, когда вы хотите развиваться, нужно многое настраивать. Запустите два сервера, запустите эмуляторы iOS и Android, подождите минуту, пока загрузится эмулятор Android, а затем запустите react-native run-android. Я рекомендую сценарий процесса. Я использовал Alfred App.
Итак, это мой первый обзор. Поскольку это относительно новая и плохо документированная библиотека, я немного беспокоился о том, чтобы потратить много времени на борьбу с ней, чтобы заставить все работать. Хотя вам нужен некоторый опыт работы с реакционным стеком (включая понимание webpack и babel), и вам придется решать некоторые проблемы, не имея качественного пошагового руководства для справки, в целом я обнаружил, что с этой структурой приятно работать, и не имеет себе равных по производительности.
Это новое пространство, и лучшие практики и процессы все еще находятся в стадии разработки. Обсуждения и разногласия будут важны, чтобы проложить путь к наличию сильных ресурсов, на которые мы можем указать. Если есть какие-то знания, которыми вы хотите поделиться, или части, с которыми вы не согласны, я призываю вас принять участие, и мы все вместе разберемся в этом.
