react native template

---

ネイティブテンプレートを反応します

このプロジェクトは、国家管理、国際化、データフェッチング、ナビゲーション、再利用可能なコンポーネントなどの重要な機能を提供することにより、開発を加速するように設計されたReactネイティブテンプレートです。

スクリーンショット

プロジェクトで提供されているデフォルトコンポーネントを使用して作成されました。

ようこそ画面

ログイン画面

登録画面

プロファイル画面

特徴

• ？国際化（I18N）

  • シームレスなローカリゼーションのためのreact-i18nextを使用した多言語サポート。

• ？€Reduxを使用した状態管理

  • 効率的なグローバルな州のアクセスと更新のための集中状態管理。

• ？ Reactクエリを使用したデータフェッチ

  • 最適化されたデータフェッチ、キャッシュ、同期。

• ？ナビゲーション

  • VStackやHStackなどのベースコンポーネントを使用したreact-navigation使用したスムーズで直感的なナビゲーション。

• Componentベースのアーキテクチャ

  • 再利用可能なUIコンポーネントと一貫したスタイリングを備えたモジュラー設計。

• ？一般的なユーティリティ

  • 合理化された開発のためのヘルパー機能とユーティリティ。

• ？ Axios管理

  • 組み込みのエラー処理と応答管理を備えたAxiosを使用した構成可能なAPI要求。

• WebSocket Management

  • WebSocketを使用したリアルタイム通信サポート。

• ？クッキー管理

  • 認証とユーザーセッションのための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 Studio / Xcode Android / iOS開発用

インストール

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 

スクリプト

• ？ Prettierを使用したフォーマットコード： yarn format
• ？‍♂‍♂appationアプリケーションを開始： yarn start
• ？ yarn android yarn ios
• ？ Eslint： yarn lintを使用してコードを糸くず
• ？テストの実行： yarn test
• エンドツーエンドテストの実行： yarn test:e2e

ライセンス

ライセンスはありません。あなたはそれを自由に使うことができます。

？著者

トニ・ダ・ロッダ

アイコン

• 展開
• 構成
• ？ドキュメント
• ？メンテナンス
• 安全
• ？電子メール統合
• ？パフォーマンスの最適化
• ⚡時間を取得します

---

問題を提出したり、リクエストをプルすることで、このプロジェクトにお気軽に貢献してください。

ご質問やサポートについては、Toni Da Roddaにお問い合わせください。

---