scalableReactNativeBoilerplate
1.0.0
Спонсируется Casainnov
Добро пожаловать в масштабируемый нативный шаблон React, структурированную отправную точку для строительства нативных приложений, которые являются обслуживаемыми, масштабируемыми и эффективными. Этот шаблон следует за лучшей практикой для организации вашей кодовой базы, настройки управления состоянием, обработки взаимодействий API, тематических и многом другом. Мы используем новейшую версию React Native и поддерживаем все библиотеки в курсе, обеспечивая совместимость с самыми последними функциями и улучшениями.
├── e2e # Detox configuration for different environments
├── Fastlane # CI/CD configuration using Fastlane for automated builds and deployment
├── src
├── assets # Directory for app assets such as images and fonts
│ ├── images # Folder for image assets used in the app
│ ├── package.json # Package file for managing assets if needed
│ └── icons # Folder for SVG or other icon assets
│ ├── iconTransactions.svg # Icon for transactions
│ ├── iconBlocks.svg # Icon for blocks
│ ├── iconSettings.svg # Icon for settings
│ ├── iconEyeInactive.svg # Inactive eye icon
│ └── iconEyeActive.svg # Active eye icon
│ └── fonts # Folder for font files
│ ├── Roboto-Regular.ttf # Regular weight of Roboto font
│ └── Roboto-Bold.ttf # Bold weight of Roboto font
├── api # Folder for handling API interactions
│ ├── constant.ts # Constants used throughout API calls
│ ├── Api.ts # Main API configuration and methods
│ ├── types.ts # TypeScript types related to API responses
│ ├── package.json # Package file for API utilities if needed
│ └── customAPI # Custom API services for specific endpoints
│ ├── routes.ts # Routes for custom API calls
│ └── customApi.ts # Custom API implementation
├── components # Reusable UI components organized by Atomic Design
│ ├── package.json # Package file for component library
│ ├── atoms # Atoms: basic UI components (buttons, inputs, etc.)
│ │ ├── LoadingComponent # Loading spinner or component
│ │ │ └── index.tsx # Component implementation
│ │ ├── Button # Button component
│ │ │ └── index.tsx # Component implementation
│ │ │ └── tests__ # Unit tests for Button component
│ │ │ └── LoadingScreen.test.tsx
│ │ ├── Text # Text component for consistent styling
│ │ │ └── index.tsx # Component implementation
│ │ └── StyledImage # Styled image component
│ │ └── index.tsx # Component implementation
│ ├── molecules # Molecules: combinations of atoms (card, form elements, etc.)
│ └── organisms # Organisms: complex components made from molecules and atoms
├── container # Context and provider components for global states
│ ├── LanguageHelper.tsx # Language context provider
│ ├── AppThemeProvider.tsx # Theme context provider
│ └── package.json # Package file for container components
├── hooks # Custom hooks for reusable logic
│ ├── useAppDispatch.ts # Hook for dispatching actions in Redux
│ ├── useAppSelector.ts # Hook for selecting state from Redux store
│ ├── useActions.ts # Hook for using Redux actions
│ ├── package.json # Package file for hooks
│ ├── index.ts # Entry point for hooks
│ └── useTraceUpdate.ts # Hook for tracing component updates
├── navigation # Navigation setup for the app
│ ├── index.tsx # Main navigation entry point
│ ├── AppNavigation # Navigation component
│ │ ├── index.tsx # Component implementation
│ │ └── AppScreens.tsx # Screens defined for navigation
│ ├── package.json # Package file for navigation
│ ├── LinkingConfiguration.ts # Configuration for deep linking
│ └── types.tsx # TypeScript types related to navigation
├── redux # Redux store and configuration
│ ├── appConfig # App configuration for Redux
│ │ ├── appConfigSelectors.ts # Selectors for app config
│ │ ├── appConfigModel.ts # Model for app config state
│ │ └── appConfig.ts # Main app configuration
│ ├── package.json # Package file for Redux
│ ├── rootReducer.ts # Root reducer for combining all reducers
│ └── store.ts # Redux store configuration
├── screens # Screens or views of the app organized by features
│ ├── package.json # Package file for screens
│ ├── HomeScreen # Home screen component
│ │ └── index.tsx # Component implementation
│ └── SettingScreen # Settings screen component
│ └── index.tsx # Component implementation
├── theme # Theming configuration and styling
│ ├── Colors.ts # Color definitions used throughout the app
│ ├── Fonts.ts # Font definitions and styling
│ ├── Screens.ts # Screen-specific styles
│ ├── globalStyling # Global styling definitions
│ │ ├── cards.ts # Card component styles
│ ├── package.json # Package file for theming
│ └── index.ts # Entry point for theme
├── i18n # Internationalization configuration
│ ├── allLanguages.ts # List of all available languages
│ ├── en_GB.ts # English (UK) translations
│ ├── fr_FR.ts # French translations
│ ├── ar_SA # Arabic (Saudi Arabia) translations
│ │ └── common.json # Common phrases in Arabic
│ ├── index.ts # Main entry for i18n configuration
│ ├── newLineProcessor.ts # Helper for processing new lines in translations
│ ├── en_GB # English (UK) translations (nested)
│ │ └── common.json # Common phrases in English (UK)
│ └── fr_FR # French translations (nested)
│ └── common.json # Common phrases in French
└── types # TypeScript type definitions for global use
│ ├── i18next.d.ts # Type definitions for i18next
│ └── declarations.d.ts # Global declarations
└── __tests__ # Unit and integration tests for components and screens
Это нативное приложение React, построенное на версии 0.75.3, демонстрирует надежную архитектуру, предназначенную для бесшовных пользовательских опытов.
Используя React Navigation (V6), приложение обеспечивает интуитивно понятную навигацию на различных экранах, обеспечивая возможность легко получить доступ к функциям.
С Redux Toolkit (V2) для управления состоянием он эффективно обрабатывает сложные состояния применения, что позволяет плавно поток данных и обновления в реальном времени.
Пользовательский интерфейс усиливается нативной статьей React (V5), которая предлагает комплексный набор настраиваемых компонентов и вариантов тематического размера, создавая визуально привлекательный интерфейс.
Чтобы обеспечить качество, приложение интегрирует Jest и Detox (V20) для тестирования, обеспечивая строгое автоматическое тестирование и обеспечение качества.
Fastlane оптимизирует процесс CI/CD, способствуя эффективному развертыванию и обновлениям.
Взаимодействие API управляется с использованием Axios, что позволяет гибко и надежно общаться с сервисами бэкэнд.
Интернационализация достигается с помощью React i18next и React Native Localize (обеспечивая поддержку для нескольких языков и региональных условий, повышая доступность для глобальной аудитории.
Приложение эффективно управляет переменными среды с использованием Native Config React, обеспечивая, чтобы конфиденциальные данные остались безопасными и организованными.
Для оптимальной обработки носителей реагирует нативное быстрое изображение повышает производительность загрузки изображений, в то время как RACE Native SVG обеспечивает поддержку масштабируемой векторной графики, что позволяет для богатого визуального контента.
Анимации становятся плавными и отзывчивы с реагированием на естественное повышение потребления пользователей посредством визуально привлекательных переходов.
Кроме того, React Native Size Matters обеспечивает адаптивную конструкцию по различным размерам устройства.
В целом, это приложение объединяет мощные библиотеки и хорошо структурированную кодовую базу для создания богатых функциями и удобными для пользователя мобильного приложения
Убедитесь, что у вас установлено следующее:
Клонировать репозиторий:
git clone [email protected]:chohra-med/scalableReactNativeBoilerplate.gitУстановите зависимости:
cd scalableReactNativeBoilerplate
yarn Запустите сервер разработки:
yarn startЗапустите приложение на iOS:
yarn iosЗапустите приложение на Android:
yarn androidЗапустите модульные тесты с шутками:
yarn testЗапустите сквозные тесты с детоксикацией:
yarn detox build -c ios
yarn detox test -c iosКорлер включает в себя базовую настройку Fastlane для автоматизации сборки, тестирования и развертывания.
Создайте приложение для Android и iOS:
cd fastlane
fastlane android beta
fastlane ios betaВзносы приветствуются! Пожалуйста, следуйте этим шагам:
feature/new-feature ).Этот проект лицензирован по лицензии MIT.
Благодаря сообществу за поддержание потрясающих библиотек, которые облегчают развитие нативного развития.
Для сотрудничества найдите меня на LinkedIn.
Посетите Casainnov, если вам нужно какое -либо сотрудничество.
