React Native Android上的网格视图

Question

I'm trying to create a scrollable, grid-like ListView on React Native Android.

I found this, and it looks exactly like what I want to do: https://github.com/yelled3/react-native-grid-example

However the style is messed up on Android, the wrap doesn't appear to work. I have 2 lines, I can't see all my elements...

Is it supposed to be supported on Android? Or do I have to take a completely different approach? (ie have one component per line and manually break up my datasource)

Answer 1

You can try this example from react-native repo https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ListViewGridLayoutExample.js

worked well for me on both platforfms.

It's better to share your code here if you want a more detailed answer.

Answer 2

The problem that you are having where you can't see all of your rows is most likely due to the navbar. Assuming you have a flex: 1 on the view, the row elements are appearing BEHIND the navbar.

A possible solution is to figure out the size of navbar and then use that to figure out the size of the view below the navbar. You can then render your grid inside the calculated view.

Something along these lines:

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>

As for how to create the grid, you can take a look at @chukcha's answer where he provides a very good resource from facebook's examples.

A few other grid alternatives are:

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