Taro-demo

Пример наилучшей практики для Taro, адаптированный для Android, iOS, WeChat Mini Programs и H5, который можно найти на GitHub. Основное внимание уделено упаковке базовых сетевых запросов, адаптации SafeArea для нескольких платформ, упрощению кода с использованием инструментов стилей вместо сложных SCSS-записей, решению проблемы передачи свойств класса через SCSS, созданию пользовательского tabBar, глобальным модальным диалоговым окнам (решение проблемы, когда диалоговые окна не могут перекрыть нижнюю панель tabBar в WeChat Mini Programs), демонстрации способов многоплатформенного использования компонентов и унификации стилей и разметки через инъекцию flex, column и relative. Также показано, как осуществляется обмен сообщениями в приложении с использованием моковых данных для раздельного разработки фронтенда и бэкенда. Этот стартовый набор инструментов адаптирован для нескольких платформ и подходит для создания новых многоплатформенных проектов. В настоящее время ведется работа над усовершенствованием базовых компонентов, цель — создание многоплатформенного базового компонента.

Степень адаптации

• H5 — идеальная адаптация
• React Native — идеальная адаптация
• WeChat Mini Programs — идеальная адаптация

Цели

• Создание многоплатформенного базового компонента — разработка и усовершенствование продолжаются### Преобразование стилей

.home__search__top {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: white;
  margin-left: 20px;
  margin-right: 20px;
}

Преобразование вышеупомянутой SCSS-записи в следующую запись упрощает разметку и решает проблему передачи свойств класса через SCSS:

style={styleAssign([styles.udr, styles.uac, bgColor('white'), ml(20), mr(20)])}

Технологический стек

typescript+eslint+redux+taro+react-native+mock

Использование

Просто клонируйте этот проект, перейдите в корневую директорию проекта и выполните команду npm install. Затем замените соответствующие элементы в директории third_changes на соответствующие компоненты в директории node_modules корневой директории проекта. Оригинальная оболочка React Native Taro-demo-rn-shell. Для получения дополнительной информации о использовании официальных компонентов перейдите на официальную документацию Taro от JD и официальную документацию WeChat Mini Programs.

• Сначала запустите локальный моковый сервис командой: npm run mock
• Для запуска React Native: npm run dev:rn
• Для запуска H5: npm run dev:h5
• Для запуска WeChat Mini Programs: npm run dev:weapp

Примеры многоплатформенного адаптации

Ссылка на проект Flutter, основанный на архитектуре fish-redux: fish-redux-demo