React Native Android上的网格视图

Question

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

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

然而，这种风格在Android上搞砸了，换行似乎不起作用。我有2行，我无法看到我的所有元素......

它应该在Android上受支持吗？或者我必须采取完全不同的方法？ （即每行有一个组件并手动分解我的数据源）

Answer 1

您可以在react-native repo https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ListViewGridLayoutExample.js

中试用此示例

在两个平台上都很适合我。

如果您想要更详细的答案，最好在此处分享您的代码。

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