React Native を使用して画像グリッドを作成する

Question

React Native で画像グリッドを構築するのを手伝ってほしいです。

配列内のマップされたデータを使用して画像グリッドを作成しようとしています。マッピング部分は正常に機能しますが、画像が希望どおりに配置されません。 これが私が探しているものです（赤い四角の場所に画像が配置されています）。

これはこれまでの私のコードです:

リーリー

これは私の CSS です:

リーリー

これは私が現在得ているものです:

これまでのところ、考えられるすべての CSS の組み合わせを試しましたが、これまでのところ何も機能しません。 FLATLIST も試しましたが、正直に言うと、現在のコードをフラットリストの要件に「適合」するように適切に変換できませんでした。

＃＃＃助けてくれてありがとう！ 乾杯！

Answer 1

これは HTML エラーです。 実際には、要素ごとにフレックスラップ スタイルを設定するため、行ごとに要素が 1 つだけ存在します。 flex-wrap div が機能するには、すべての要素を flex-wrap div に入れる必要があります。お役に立てば幸いです

リーリー

Answer 2

答えが見つかりました! 2 つのチュートリアルのいくつかのヒントを組み合わせて、無事に完了しました。

まず、「FlatList」を使用して画像グリッドを構築しました。ここで素晴らしいステップバイステップのチュートリアルを見つけました (私のページではなく、アフィリエイトもありません): YouTube チュートリアル 最初は、「numColumns={ }」

を追加するまでは同じ結果が得られました。

コードは以下のように表示されます:

リーリー

.

リーリー

次に、このチュートリアルのいくつかの戦略を使用しました (私のページではなく、アフィリエイトでもありません)。 YouTube チュートリアル

見た目を良くするために CSS を微調整する必要がありますが、今のところ満足しています。

これが最終結果です: