react-native FlatList实现GridView效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react-native FlatList实现GridView效果相关的知识，希望对你有一定的参考价值。
参考技术A 做android的人都知道，Android有一种控件叫GridView，可以用来展示图片，类似于9宫格效果，而在react native中，我们要用FlatList实现这种效果~如图，每行显示3个图片，总共有4个间隔，间隔距离我们给固定值，以此类推，如果显示cols个图片，间隔数为cols+1，我们需要据此计算图片宽度。
假设：列数cols = 3，左右边距left = 10, 上下间距top = 10,那么图片宽度ImageWH = (screenW - (cols + 1) * left) / cols，图片高度ImageH = ImageWH * 0.8
以上是关于react-native FlatList实现GridView效果的主要内容，如果未能解决你的问题，请参考以下文章
react-native ScrollView 嵌套 FlatList滚动
react-native使用flatlist上拉加载下拉刷新
React-Native：使用 pagingEnabled 时获取 FlatList 中的当前页面