android - React Native Android 上的网格视图

Question

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

我找到了这个，它看起来和我想做的一模一样：https ://github.com/yelled3/react-native-grid-example

然而，Android 上的风格搞砸了，包装似乎不起作用。我有 2 行，我看不到我所有的元素......

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

Answer 1

您无法看到所有行的问题很可能是由于导航栏造成的。假设您有一个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

Answer 2

react-native您可以从repo https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ListViewGridLayoutExample.js尝试这个示例

在这两个平台上对我来说都很好。

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