ReactNative 能否使用ListView+AutoResponisve实现瀑布布局(锯齿布局)?

写在前面:

近期使用使用ReactNative开发时遇到一个瀑布流场景需求,遇到一些意想之外的坑,所以本篇文章我主要从如何避坑、如何实现来讲解?目标:实现瀑布流布局如下图:
这里写图片描述


autoresponsive-react-native简介:

autoresponsive-react-native 是一款非常优秀的响应布局开源框架,用这个实现瀑布流简直是利器,支持有react版,reactNative 版,Vue版(框架的优点太突出,腰间盘都没它突出啊)
gitHub地址: https://github.com/xudafeng/autoresponsive-react-native
autoresponsive-react版的文档地址,支持中文,可在线演示:
https://xudafeng.github.io/autoresponsive-react/

上面文档中你可看到大致用法,不过我们的今天的主题并不是如何使用这个框架,而是这个框架能不能跟ReactNative 中的ListView 一起使用?因为,如果这两个框架如果能放在一起使用简直是集优秀性能于一身,那岂不是美哉!!!
既然目标有了,那就一起看看代码实现效果:


代码示例1:

下面是部分主要代码,

<AutoResponisve {...this.getAutoResponsiveProps()}>
    <ListView
        dataSource={this.state.dataSource.cloneWithRows(feedList.slice(0))} //数据源
        contentContainerStyle={{justifyContent:'space-around',flexDirection: 'row',flexWrap: 'wrap',paddingTop:10,paddingHorizontal:5}}
        renderRow={this.renderChildren} //列表模板
        initialListSize={2}//指定在组件刚挂载的时候渲染多少行数据。用这个属性来确保首屏显示合适数量的数据,而不是花费太多帧逐步显示出来
        onEndReached={this._onEndReach}
        onEndReachedThreshold={30} //调用onEndReached之前的临界值,单位是像素
        renderFooter={this._renderFooter}//脚会在每次渲染过程中都重新渲染
        refreshControl={
            <RefreshControl
                refreshing={isRefreshing}
                onRefresh={this._onRefresh}
                colors={['rgb(217, 51, 58)']}
            />
        }
    />
</AutoResponisve>

解释:autoresponsive-react-native 框架的用法需要把重复出现的列表内容用<AutoResponisve {...this.getAutoResponsiveProps()}> </AutoResponisve>包裹,因此你看到了上面代码ListView被它所包裹,用法没毛病,看一下运行效果:
这里写图片描述
结果报了错,大致是说子模块的宽度没法评估,,,。仔细想想,上面的方式有问题,首先ListView就一个啊,List又不是有多个,出现多个的只是ListView 中的item而已,所以我们继续修改代码,如下:


代码示例2:

<AutoResponisve {...this.getAutoResponsiveProps()}>
   <ListViewItem />
</AutoResponisve>

上面代码是ListView中renderRow={this.renderChildren} 的renderChildren 组件中的代码,示例代码1中的第5行
运行效果如下,都堆在一起了,,,无奈(item布局是我随便排的,我们要的效果还是像测试图中的item排列方式,请忽略item中的样式排版)
这里写图片描述
原因分析:弄到这里还没实现效果,我必须带大家去看一下官网中给的例子了:

class SimplestSampleComponent extends React.Component {

  ...

  render() {
    return (
      <div>
        <div className="btn-group">
          {this.renderButtons()}
        </div>
        <AutoResponsive ref="container" {...this.getAutoResponsiveProps()}>
          {this.renderItems()}
        </AutoResponsive>
      </div>
    );
  }
}

注意第11-13行,我上面说过,需要使用特定标签将列表所有item包裹,作为父级元素。讲到这,我们恍然大悟,item的父级只有ListView 本身,你无法像官网中例子那样讲item包裹在AutoResponsive标签内部啊,因为ListView有自己内部的map循环,示例代码2犯的错误是:将单个item包裹在AutoResponsive标签中,这本身就违反了用法。这里你可能会问了,到底能不能使用AutoResponsive+ListView 实现瀑布流?结果很明显,现在还不能!
其他原因:listView本身最擅长的就是垂直列表,或者说屏幕的每一横排的一个或几个item的高度相同的垂直布局(参考下图,每横排的高度不同),
这里写图片描述
上图中的ListView样式还需添加flexDirection: 'row',flexWrap: 'wrap',否则是没有左右布局
重点:AutoResponsive包裹的内容还不能使用flexDirection: 'row',flexWrap: 'wrap'否则页面排版出现混乱,可以下去尝试一番。

下面是FlatList(ListView优化版)目前最新版本0.56中的说明:暂时还无法支持瀑布流。
这里写图片描述


解决方案:

使用ScrollView + AutoResponsive

<ScrollView
     contentContainerStyle={{paddingTop: 10}}
     ref={scrollView => this.scrollView = scrollView}
     style={{width: gScreen.width, height: scrollViewH}}
     automaticallyAdjustContentInsets={false}
     removeClippedSubviews
     bounces
     scrollEventThrottle={16}
     onMomentumScrollEnd={this.onMomentumScrollEnd}
     refreshControl={
         <RefreshControl
             refreshing={isFetching}
             onRefresh={this.onRefresh}
             colors={['rgb(217, 51, 58)']}
         />
     }
 >
    <AutoResponisve {...this.getAutoResponsiveProps()}>
        {feedArray.map(this.renderChildren)}//加载所有列表item
    </AutoResponisve>

 </ScrollView>

总结:

1.AutoResponsive包裹的内容还不能使用flexDirection: 'row',flexWrap: 'wrap'否则页面排版出现混乱。
2.AutoResponisve包裹的组件,组件中的样式不能使用StyleSheet.create创建出来的样式,和使用行内样式或者下面写法。

const style = {
     width:(ScreenWidth-40) / 2,
     backgroundColor:'red',
     marginLeft: 15
}

例如:

<View style={[style,{height:rheight,alignItems:'center',justifyContent:'center'}]}>
   <Text style={{fontSize:20}}>{item.name}</Text>
</View>

3.使用ScrollView作列表渲染时,一定要做好分页,目的是提高新能。(ScrollView机制是将所有item一次性全部渲染出来,对性能消耗过大)。

简单Demo文件,可下载!
https://download.csdn.net/download/li11_/10617123

AutoResponisve + ScrollView 的Demo
https://download.csdn.net/download/li11_/10617371


为了能及时的将自己踩到的前端坑(包括ionic,angular,ReactNative,小程序,APICloud)分享给大家,以后会逐渐将文章转移到微信公众号:前端e家(front_e_family)。可直接扫码关注,公众号会不定期更新新文章,分享踩坑笔记!期待您的关注!
这里写图片描述

©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值