前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React-Native 在 SectionList 组件中实现九宫格布局

React-Native 在 SectionList 组件中实现九宫格布局

作者头像
Originalee
发布2019-04-17 16:45:52
3.9K0
发布2019-04-17 16:45:52
举报
文章被收录于专栏:编程之旅

随着 ReactNative 的不断更新,ListView 这个组件逐步被 FlatList 和 SectionList 取代。ListView 从出生之后就饱受诟病,比如不支持单独的头部和尾部组件,并且当列表数据源过大时,占用内存明显增加性能受到影响,无法达到 60FPS 。在这样的背景下,FlatList 和 SectionList 就应运而生了,FlatList 用于无分组的列表,而 SectionList 用于有分组的列表。

而我在使用 SectionList 的过程中有一个需求需要实现,分组中的其他 Section 内都使用普通列表就可以,但是其中一组是图片展示的,需要使用九宫格来展示。那么这时候该如何实现需求呢?

先来看一下 SectionList 的简单使用:

代码语言:javascript
复制
<SectionList
  renderItem={({item}) => <ListItem title={item.title} />}
  renderSectionHeader={({section}) => <H1 title={section.key} />}
  sections={[ // 不同section渲染相同类型的子组件
    {data: [...], key: ...},
    {data: [...], key: ...},
    {data: [...], key: ...},
  ]}
/>

在看一下我们需要实现的效果:

图片

类似于这样的九宫格效果。

其实我实现的思路非常简单,先处理修改每个 section 中的数据源的格式,将数据再包入一层数组中,例如:

代码语言:javascript
复制
{data: [{item: 1}, {item: 2}, {item: 3}]} // 修改之前
{data: [[{item: 1}, {item: 2}, {item: 3}]]} //修改之后

请各位同学仔细比较上述两组的修改,明确修改的不同点,在完成之后呢我们来这样写我们的 render 函数。

代码语言:javascript
复制
_renderImageItem = (item) => (
  <View style={styles.imgContainer}>
    {item.map((item, i) => (
      <View key={i} style={styles.imgItemWrap}>
        <Image style={styles.imgItemStyle} source={require('xxx.png')} />
      </View>
    ))}
  </View>
)

可以看到函数的结构很简单,就是一个遍历,而关键点在于布局,我们利用 flex 布局的特性,完成九宫格排列。

代码语言:javascript
复制
const styles = StyleSheet.create({
  imgContainer: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
  }
});

最关键的 imageContiner 的布局写法就是这样,首先使用 flexDirection 为 row 的属性值实现横向排列,再使用 flexWrap 为 wrap 的属性值使图片换行,这样的操作下,一个简易的九宫格布局就完成了。当然我知道这样的完成并不是最好的,我也只是提供一种实现的思路,如果有小伙伴能不改变数据源结构就完成操作的话,希望在博客底下留言评论,能让我也学习进步,感激不尽!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.04.06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档