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。

---