あなたが読むよりむしろ見たい方がよいならば:https://youtu.be/bG7tIR4QS10
ギャラリーは、Webアプリケーションにイメージを統合する人気のある方法です.画像ギャラリーでは、行や列に写真を追加することができますが、より少ないスペースでより多くの写真を表示することもできますが、それを簡単にユーザーがそれらを閲覧することができます.
この記事ではどのように高速で最も簡単な方法でイメージギャラリーを使用する方法を示しますrainbow-modules ライブラリとfirebase.これを実現するには、JavaScript、Response、Nodeの一般的な背景が必要です.JSと糸.

何が必要

ノード.js

糸

お気に入りのIDE ( vscodeを使います)

依存関係を追加する

このプロジェクトのために、私は新しい作成反応アプリプロジェクトを使用します.プロジェクトの初期化と初期化方法を知りたい場合は、https://create-react-app.dev/ .
プロジェクトを作成した後、必要な依存関係のインストールに進みます.

yarn add react-intl react-redux react-router-dom redux redux-form
yarn add @rainbow-modules/app
yarn add @rainbow-modules/storage
yarn add react-rainbow-components
yarn add firebase

我々はコードに準備ができている依存関係をインストールした後!

コーディング

まず第一に、我々は我々の反応アプリケーションでFireBaseプロジェクトを接続するために正しい構成を使用する必要があります.FireBaseという名前のファイルを作成します.Firebaseプロジェクトの設定を保存するsrcフォルダ内のJS.

import firebase from 'firebase/app';
import 'firebase/storage';
const firebaseConfig = {
    apiKey: 'your apiKey',
    authDomain: 'your authDomain',
    projectId: 'your projectId',
    storageBucket: 'your storageBucket',
    messagingSenderId: 'your messagingSenderId',
    appId: 'your appId',
};
export default firebase.initializeApp(firebaseConfig);

今私たちの設定を準備して、我々はアプリに移動します.JSとすべてのコンテンツを削除します.ここで依存関係をインポートします.

import { RainbowFirebaseApp } from '@rainbow-modules/app';
import { ImageGallery } from '@rainbow-modules/storage';
import { Card } from 'react-rainbow-components';
import firebaseApp from './firebase';
import './App.css';

次に、appコンポーネントに次のコードを追加します.

function App() {
    return (
        <RainbowFirebaseApp app={firebaseApp}>
            <div className="App">
                <Card>
                    <ImageGallery
                        path="/gallery"
                        allowUpload
                        allowDelete
                        onSelect={(imageRef) => {
                            alert(imageRef.name)
                        }}
                    />
                </Card>
            </div>
        </RainbowFirebaseApp>
    );
}
export default App;

コードのこれらのいくつかの行では、我々はすでに我々のアプリケーションで作業イメージギャラリーがあります.我々が見ることができるように、我々はAを加えなければなりませんpath FireBaseストレージ内のパスをプロップすると、画像がギャラリーに保存されます.
注意allowUpload and allowDelete 小道具を有効にして無効にする画像をアップロードしてオプションを削除します.とonSelect prop特定の画像が選択されたときに何らかのアクションを実行できます.

スタイリング

また、Webアプリケーションの外観を高めるためにいくつかの簡単なスタイルを追加します.アプリに移動します.CSSファイルとその内容をすべて削除し、その中に次のコードを追加します.

.App {
   min-height: 100vh;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

ここで保存と再読み込みを行います.

結論

我々は、我々の旅の終わりに到達し、その結果、我々は非常に魅力的なイメージギャラリー、コードのいくつかの行を任意の反応アプリケーションで使用する準備ができている.