反応ネイティブ要素とエキスポを使用したクローニング火口

このチュートリアルは、モバイル用のピクセルに最適なレイアウトの作成に焦点を当てた、Reactネイティブ要素とExpoを使用してTinderクローンを構築することをガイドします。 ホーム、トップピック、プロファイル、メッセージの4つの重要な画面を作成します。

主要な機能：

合理化されたクロスプラットフォームスタイリング（Android、iOS、Web）の反応ネイティブ要素を活用します。

簡略化されたプロジェクトのセットアップと実行にExpoを利用しています
• 反応ナビゲーションを使用してカスタムナビゲーションとタブバーを実装します。 Tinderスタイルのカードスワイプに
• を使用しています。
• YARNを使用して資産と依存関係を効率的に管理します
• react-native-deck-swiper前提条件：
基本的な反応ネイティブおよび博覧会の知識が想定されています。モバイルデバイスまたはシミュレーターにexpoクライアントが必要で、Yarnと

がインストールされます。 このチュートリアルでは、ノード11.14.0、NPM 6.4.1、YARN 1.15.2、およびExpo 2.16.1（必要に応じて更新）を使用しています。

プロジェクトのセットアップ：

expo-cli新しいエキスポプロジェクトを作成：

（「タブ」テンプレートを選択してください）。

依存関係のインストール：

1. expo init expo-tinder
2. yarn install反応ネイティブ要素統合：

インストール反応ネイティブ要素：

uiの構築：

チュートリアルの詳細は、次のような各画面の作成を詳しく説明しています yarn add react-native-elements

ホーム画面：スワイプ可能なカード（

コンポーネント）に

を使用します。 ダミーデータは

。

からロードされます

• トップピック画面：react-native-deck-swiperCard 'sconstants/Pics.jsコンポーネントを使用して、プロファイルカードのスクロール可能なグリッドを表示します。

  。
から吸収されたデータ

• メッセージ画面：react-native-elements Tile 'sconstants/Pics.jsコンポーネントを使用してメッセージのリストを提示します。

  。
からのデータ

• プロファイル画面：react-native-elements画像、詳細、ソーシャルメディアリンクを備えたユーザープロファイルが表示されます。 ListItemコンポーネントとカスタムスタイリングを使用します constants/Messages.js

チュートリアルでは、説明とスタイリングの詳細とともに、各画面のコードスニペットを提供します。 GitHubリポジトリから必要な資産画像を含めることを忘れないでください。

• react-native-elementsナビゲーションのセットアップ：

チュートリアルでは、デフォルトのタブナビゲーション（MainTabNavigator.js）を変更して、4つの画面を含め、カスタムTabBarIconコンポーネントを使用してアイコンをカスタマイズし、headerMode: 'none'を使用してデフォルトのヘッダーを削除します。 SafeAreaViewは、デバイスの安全なエリア内で適切にレンダリングするために使用されます。

完全なコードはGitHubで利用できます。 このチュートリアルは、UIのカスタマイズ、機能の追加、ファイヤーベースの統合、展開、パフォーマンスの最適化、セキュリティ、収益化、データ処理、テスト、更新をカバーするFAQで終わります。

以上が反応ネイティブ要素とエキスポを使用したクローニング火口の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。