React Native — популярный фреймворк для создания кроссплатформенных мобильных приложений. Это позволяет разработчикам использовать одну и ту же кодовую базу для приложений iOS и Android, что делает процесс разработки более эффективным. Одним из ключевых аспектов создания успешного проекта React Native является хорошо организованная структура проекта. В этом блоге мы обсудим лучшие практики структурирования проекта React Native.

Базовые зависимости

Структура папок

Этот шаблон следует очень простой структуре проекта:

  • assets: папка ресурсов для хранения всех изображений, векторов, шрифтов и т. д.
  • src: Эта папка является основным контейнером всего кода вашего приложения.
  • components: папка для хранения любого общего компонента, который вы используете в своем приложении (например, общая кнопка).
  • constants: Папка для хранения любой константы, которая у вас есть.
  • routes: Папка для хранения навигаторов.
  • redux: В этой папке должны быть все ваши редукторы и хранилище
  • views: Папка, содержащая все экраны/функции вашего приложения.
  • helper: Общий контроллер API.
  • utils: Папка для хранения любой общей функции, такой как вычисление радиуса и различные функции форматирования даты.
  • App.js: Основной компонент, запускающий все ваше приложение.
  • index.js: Точка входа вашего приложения в соответствии со стандартами React-Native.

Измените файлы переменных среды в корневой папке (.env)

Как это использовать

Идея этого раздела состоит в том, чтобы объяснить, как композиция шаблона является наилучшей и простой в использовании, когда вы пытаетесь использовать правильно сформированные архитектуры, особенно с использованием избыточного потока.

Шаблон следует простой и удобной схеме экспорта. Индекс папки предоставляет ресурсы, позволяя импортировать все по одному и тому же пути.

Компоненты

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

Еще одна важная вещь — использование propTypes для проверки того, какие данные нужны вашим компонентам для правильной работы. Если компонент получает какие-то данные от других, то должен быть определен тип этих реквизитов, а в случае необходимости и значение свойства по умолчанию.

Обработчик API-соединения

Чтобы упростить сетевой уровень, в шаблоне используется один экземпляр Axios в файле api.js. Он использует перехватчики для определения общих побочных эффектов для ответов.

Взгляды

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

Заключение

Это всего лишь один из способов, который я обнаружил, чтобы быть продуктивным и лучше организовать ваш код в команде, я надеюсь, что он поможет и вам. Вы можете найти готовую структуру проекта на GitHub.

https://github.com/VinitBhavsar/React-Native-Project-Structure

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

Если вы нашли эту статью полезной, не забудьте поделиться ею и похлопать! 👏