在React Native Android上的网格视图

Question

我试图在React Native Android上创建一个可滚动的网格状ListView。

我发现了这一点，它看起来完全像什么，我想做的事：https://github.com/yelled3/react-native-grid-example

但是风格是搞砸了在Android上，包不出现工作。我有2行，我看不到我的所有元素...

难道这就是在Android上得到支持？还是我必须采取完全不同的方法？ （即每行有一个组件，手动打破了我的数据源）

Answer 1

您可以从react-native回购https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ListViewGridLayoutExample.js

工作很适合我两个platforfms尝试这个例子。

如果你想得到更详细的答案，最好在这里分享你的代码。

Answer 2

您在哪里看不到所有行的问题最有可能是由于导航栏。假设视图上有一个flex: 1，行元素显示在导航栏的后面。

一个可能的解决方案是找出导航栏的大小，然后用它来确定导航栏下面的视图的大小。然后，您可以在计算的视图中呈现您的网格。

东西沿着这些路线：

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的例子非常好的资源。

其他一些电网的替代品：

• https://github.com/jskuby/react-native-gridview
• https://github.com/lucholaf/react-native-grid-view