Давайте исправим эту иерархию..

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

Изначально у нас есть Android Studio и Xcode, эти инструменты разработки берут немного заряда и организуют большинство вещей для вас, но когда вы впервые запускаете приложение в React Native, вы можете бросить все в корневой каталог.

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

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

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

Эта папка app будет содержать наши подпапки. Теперь количество и имена подпапок могут меняться в зависимости от проекта, но есть несколько основных моментов:

─| app
 |     -|Component 
         -|Shared
         -|Screens/Views
 |     -|Assets
         -|images
         -|fonts
 |     -|Navigator
         -|Drawer
         -|Bottom or any other navigator you have
         -|stack
         -|index
 |     -|Styles
 |     -| utilities
         -|Strings
         -|Fonts
         -|Colors

Ладно, держи эту трясущуюся голову, мы сломаемся и разберемся. Давайте возьмем каждую папку и обсудим ее…

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

Компонент

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

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

Ресурсы:

Папка Assets может содержать все ваши изображения, видео, анимацию, шрифты и любые другие подобные вещи.

Навигаторы:

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

Стили:

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

Утилиты:

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

В папке String вы можете хранить всю свою строку в одном месте, это также помогает при преобразовании языка.

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

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

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

Дополнительные статьи:



Как структурировать приложение React Native для масштабирования
Вот пример проекта, демонстрирующий концепции, обсуждаемые в этой статье.medium.com





Правильное структурирование приложения React Native + MobX
Я собираюсь обсудить структуру приложения React Native таким образом, который я считаю интуитивно понятным и преодолевающим многие…blog.geekyants.com



Ладно, это все.

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

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

Не забудьте сделать Cкруг.