scalableReactNativeBoilerplate
1.0.0
由Casainnov赞助
欢迎使用可扩展的反应本机样机盘，这是一个可维护，可扩展和高效的构建本机应用的结构化起点。该样板遵循组织代码库，设置状态管理，处理API交互，主题等的最佳实践。我们使用最新的React本机版本，并使所有库保持最新状态，从而确保与最新功能和改进的兼容性。
├── 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 Native Paper（V5）增强了UI，该纸张提供了一组全面的可自定义组件和主题选项，从而创建了视觉上吸引人的界面。
为了确保质量，该应用程序集成了开玩笑和排毒（V20）进行测试，从而实现了严格的自动测试和质量保证。
Fastlane简化了CI/CD流程，从而促进了有效的部署和更新。
使用Axios对API交互进行管理，从而可以与后端服务进行灵活而稳健的通信。
React I18Next和React Antial局部化实现了国际化（为多种语言和区域设置提供支持，增强了全球受众的可访问性。
该应用程序使用React Native配置有效地管理环境变量，以确保敏感数据保持安全和组织。
为了进行最佳的媒体处理，React Antial Fast Image增强了图像加载性能，而React Native SVG提供了可扩展的矢量图形支持，从而提供了丰富的视觉内容。
通过视觉上吸引人的过渡，将动画变成液体和反应，并通过反应的本机复活增强用户参与度。
此外，反应天然大小问题可确保各种设备尺寸的响应式设计。
总体而言，此应用程序结合了功能强大的库和结构良好的代码库，以创建功能丰富且用户友好的移动应用程序
确保已安装以下内容：
克隆存储库：
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该样板包括用于自动化，测试和部署的基本斋戒设置。
为Android和iOS构建应用程序：
cd fastlane
fastlane android beta
fastlane ios beta欢迎捐款！请按照以下步骤操作：
feature/new-feature ）。该项目已根据MIT许可获得许可。
感谢社区维护了令人敬畏的图书馆，这些图书馆使反应的本地开发变得更加容易。
要进行协作，请在LinkedIn上找到我。
如果您需要任何合作，请访问Casainnov。
