React Native Android でスクロール可能なグリッドのような ListView を作成しようとしています。
私はこれを見つけました、そしてそれは私がやりたいこととまったく同じように見えます: https://github.com/yelled3/react-native-grid-example
ただし、Android ではスタイルがおかしくなり、ラップが機能していないようです。2行ありますが、すべての要素が表示されません...
Androidでサポートされるはずですか？それとも、まったく別のアプローチを取る必要がありますか? (つまり、1 行に 1 つのコンポーネントがあり、データソースを手動で分割します)
react-nativeリポジトリからこの例を試すことができます https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ListViewGridLayoutExample.js
両方のプラットフォームでうまくいきました。
より詳細な回答が必要な場合は、ここでコードを共有することをお勧めします。
すべての行が表示されないという問題は、ナビゲーション バーが原因である可能性が最も高いです。ビューにがあると仮定するとflex: 1、行要素はナビゲーションバーの後ろに表示されます。
考えられる解決策は、navbar のサイズを把握し、それを使用して navbar の下のビューのサイズを把握することです。次に、計算されたビュー内でグリッドをレンダリングできます。
これらの行に沿ったもの：
const NavHeightPadding = Platform.OS === 'ios' ? 64 : 54
const { width, height } = Dimensions.get('window');
const ViewHeight = { height: height - NavHeightPadding }
<View style={[{ marginTop: NavHeightPadding }, ViewHeight]}>
...some grid component
</View>
グリッドの作成方法については、@chukcha の回答を参照してください。Facebook の例から非常に優れたリソースが提供されています。
他のいくつかのグリッドの代替手段は次のとおりです。