[解決済み] React Native のフラットリスト、カラム、最後のアイテム幅
2023-02-26 16:52:26
質問
FlatListを使用して、2つのカラムにアイテムのリストを表示しています。
<FlatList style={{margin:5}}
data={this.state.items}
numColumns={2}
keyExtractor={(item, index) => item.id }
renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> }
/>
カードコンポーネントは、いくつかのスタイルを持つ単なるビューです。
<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} ></View>
正常に動作していますが、項目数が奇数の場合、最後の行に1つの項目しかなく、その項目が画面の幅いっぱいに伸びてしまいます。
どうすれば、その項目を他の項目と同じ幅にすることができるのでしょうか?
どのように解決するのですか?
いくつかの方法を試してみてください。
A) カードにあらかじめ幅を設定する(設定した高さと同じかもしれません)。それから
alignItems
を使って、カードを中央または左側に配置することができます。
B) カードの数が偶数の場合、このスペースを埋めるために、最後に空のビューを追加することができます。この方法はかなり不便ですが、将来の要素のためにスペースを残しておこうとするときに便利です。
C) 単純に
alignItems: 'space-between
私はこれをアイテムの中央揃えに使いたいのですが、幅を定義する必要がありますし、次のようなものを使うこともできます。
flex:0.5
この状況の背景を伝えるのが難しいので、フレックスボックスについてもっと研究することをお勧めします。上記の方法が役立つと思いますが、そうでない場合は、以下のリンクを参考にしてください -。
3番目のリンク
<サブ
リンク切れ
これが役に立つことを願っています。さらに詳しい説明が必要な場合は、お問い合わせください。
関連
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] react-nativeでキーボードを隠す
-
[解決済み] React Native - StyleSheetを使用する利点は、プレーンなオブジェクトと比較して何ですか?
-
[解決済み] react nativeプロジェクトにインストールされたライブラリを削除する方法
-
[解決済み] Androidのフラットリスト(React Native)でスクロールバーを隠す
-
[解決済み] React Nativeのエラー。"javaのバージョンを'9.0.1'から決定できませんでした。"
-
[解決済み] React Nativeで電話をかけるには?
-
[解決済み] React Native Android ビルドエラー MainActivity.java:29: error: cannot find symbol
-
[解決済み] React Nativeで「リモートデバッガがバックグラウンドのタブにある」という警告を消す。
-
[解決済み] React Nativeのプロジェクト名を変更しますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] React Nativeでアプリ名を変更する
-
[解決済み] React-Nativeは最初の文字が大文字でないものを書けない
-
[解決済み] Androidのフラットリスト(React Native)でスクロールバーを隠す
-
[解決済み] React Nativeのエラー。"javaのバージョンを'9.0.1'から決定できませんでした。"
-
[解決済み] React Native アニメーション、完全なイベント
-
[解決済み] react nativeで<Text>のテキストを大文字にする方法
-
[解決済み] React Nativeのスタイルはグラデーションをサポートしていますか?
-
[解決済み] React Native Android ビルドエラー MainActivity.java:29: error: cannot find symbol
-
[解決済み] React Nativeで「リモートデバッガがバックグラウンドのタブにある」という警告を消す。
-
[解決済み] React Nativeのプロジェクト名を変更しますか?