react native template

---

反应本机模板

该项目是一个反应本机模板，旨在通过提供基本特征，例如国家管理，国际化，数据获取，导航和可重复使用的组件来加速开发。

屏幕截图

使用项目中提供的默认组件创建。

欢迎屏幕

登录屏幕

注册屏幕

个人资料屏幕

特征

• ？国际化（I18N）

  • 使用react-i18next进行无缝定位的多语言支持。

• 国家管理带有redux

  • 集中式国家管理，用于有效的全球状态访问和更新。

• ？用React查询获取数据

  • 优化数据获取，缓存和同步。

• ？导航

  • 使用react-navigation与VStack和HStack等基本组件进行反应游动的平滑而直观的导航。

• ⚛️基于组件的体系结构

  • 模块化设计，具有可重复使用的UI组件和一致的样式。

• ？通用公用事业

  • 用于简化开发的助手功能和实用程序。

• ？ Axios管理

  • 可配置的API请求使用AXIOS具有内置错误处理和响应管理。

• WebSocket管理

  • 使用Websocket的实时通信支持。

• ？ cookie管理

  • 简化的cookie管理用于身份验证和用户会话。

• 验证

  • 用户身份验证和注册，并具有安全的令牌管理。

成分

该项目包括一组可重复使用的组件，用于构建用户界面：

• 按钮组件

  • button.tsx ：具有可自定义样式的标准按钮组件。

• 版式组件

  • h1.tsx ， h2.tsx ：针对一致版式的标题组件。
  • text.tsx ：用于显示内容的可自定义文本组件。

• 输入组件

  • input.tsx ：基本输入字段组件。
  • input-with-icon.tsx ：带有图标的输入字段，用于增强用户交互。

• 布局组件

  • vstack.tsx ：用于垂直排列元素的垂直堆栈布局。
  • hstack.tsx ：水平堆栈布局，用于水平排列元素。
  • spacer.tsx ：用于在元素之间添加灵活空间的间隔组件。

• 导航组件

  • navbar.tsx ：应用程序标头的可自定义导航栏。

• 图像组件

  • image.tsx ：用于显示带有缓存支持的图像的图像组件。

• 实用程序组件

  • separator.tsx ：分隔内容的分隔组件。
  • separator-with-text.tsx ：带有文本的划分，用于增强的UI。
  • switch.tsx ：布尔输入的切换开关组件。

• 索引文件

  • index.ts ：组件的中央导出文件。

入门

先决条件

确保您安装了以下内容：

• node.js（v14或更高）
• 纱
• 用于Android / iOS开发的Android Studio / Xcode

安装

1. 克隆存储库：

   git clone [email protected]:ToniDarodda/react-native-template.git
   cd ReactNativeTemplate

2. 安装依赖项：

   yarn install

3. 配置环境变量：

   使用您的配置设置更新根目录中的.env文件：

   API_URL= ' https://your-api-url.com '
   SOCKET_URL= ' https://your-socket-url.com '

运行应用程序

1. 启动地铁捆绑者：

   yarn start

2. 在Android上运行应用程序：

   yarn android

3. 在iOS上运行该应用程序：

   yarn ios

4. 访问应用程序：

   该应用将在您的仿真器或设备上可用。

？测试

要运行测试，请使用以下命令：

yarn test 

脚本

• ？使用漂亮的格式代码： yarn format
• ？‍♂️启动应用程序： yarn start
• ？‍从开发模式开始： yarn android或yarn ios
• ？使用ESLINT： yarn lint覆盖物
• ？运行测试： yarn test
• 运行端到端测试： yarn test:e2e

执照

没有许可证；您可以自由使用它。

？作者

托尼·达·罗达（Toni da Rodda）

图标

• 部署
• 配置
• ？文档
• ？维护
• 安全
• ？电子邮件集成
• ？性能优化
• ⚡获得时间

---

通过提交问题或提取请求来随意为该项目做出贡献。

如有任何疑问或支持，请联系Toni da Rodda。

---