How can I list 2 columns in a React Native Flatlist, e.g.:
相关问题
- React Native Inline style for multiple Text in sin
- How Do I Convert Image URI into Byte Expo
- ApolloClient from apollo-boost attemped to assign
- Implementing ssl pinning in a react-native applica
- React-Native: Enable Performance Monitor in produc
相关文章
- Why do we have to call `.done()` at the end of a p
- Remove expo from react native
- React Native - Dynamic Image Source
- “Unfortunately, app has stopped” error with buildi
- eslint Parsing error: Unexpected token =
- How to determine JS bottlenecks in React Native co
- How to override navigation options in functional c
- PanResponder snaps Animated.View back to original
You can do it in one of two ways. First the straight forward way is to create 2 FlatList columns with flex layout and distribute your data between them like so:
Assuming you have
style
anddata
definedYou can do this
The issue there is that both lists are independent and would render a bad mobile experience. A better way would be to group your data and render a single column FlatList so your content is unified.
First you would need a function to group your data into 'rows' of data
Then do this...
You will likely need to fiddle with the styling to get it like you want, but you get the idea :)
It took me a long time to figure this out, but this can in fact be achieved without using any external libraries. You will need to use negative margin in a smart way.
The negative margin will be applied in the VirtualizedList prop CellRendererComponent in order to get it to work properly on Android.
The JSX:
The data:
The styles:
Do note that arranging the images in the array properly is up to you - always place the taller image in the shorter side, and make sure to calculate the height difference and keep track of it. Have fun.
Pass
numColumns
Just pass the prop numColumns to your FlatList component.
In
react-native
standard style isflexDirection: 'col'
, which means the elements are arranged from top to bottom. To change this (right to left) you should set style toflexDirection: 'row'
.