ReactNative 能否使用ListView+AutoResponisve實現瀑布佈局(鋸齒佈局)?
寫在前面:
近期使用使用ReactNative開發時遇到一個瀑布流場景需求,遇到一些意想之外的坑,所以本篇文章我主要從如何避坑、如何實現來講解?目標:實現瀑布流佈局如下圖:
autoresponsive-react-native簡介:
上面文件中你可看到大致用法,不過我們的今天的主題並不是如何使用這個框架,而是這個框架能不能跟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一次性全部渲染出來,對效能消耗過大)。
為了能及時的將自己踩到的前端坑(包括ionic,angular,ReactNative,小程式,APICloud)分享給大家,以後會逐漸將文章轉移到微信公眾號:前端e家(front_e_family)。可直接掃碼關注,公眾號會不定期更新新文章,分享踩坑筆記!期待您的關注!
相關推薦
ReactNative 能否使用ListView+AutoResponisve實現瀑布佈局(鋸齒佈局)?
寫在前面: 近期使用使用ReactNative開發時遇到一個瀑布流場景需求,遇到一些意想之外的坑,所以本篇文章我主要從如何避坑、如何實現來講解?目標:實現瀑布流佈局如下圖: autoresponsive-react-native簡介: 上面
Android實現儲存圖片,長圖、長佈局(webView等)
最近開發遇到一個問題,分享的時候 需要分享一個佈局內容,但是要用圖片分享的格式,最開始思考感覺不可能實現,手機上很少有功能可以實現長圖儲存的, 可是經理說,髮長微博的時候就是自動儲存的長圖片,頓時傻眼了,人家是怎麼做的呢??? 本已經放棄該功能,可這麼一說,又開始在網上找,並沒有很明確的找到
一行css程式碼輕鬆實現前端響應式佈局(vw+rem)
大家知道rem可以用來做響應式佈局,只是html元素上的font-size樣式需要根據螢幕寬度來指定。 之前有用@media媒體查詢,根據各種螢幕寬度寫html的樣式,也用過類似lib-flexible這樣的js庫動態改變html樣式,總覺得挺麻煩的。 今天突然想到vw這個單位,發現用它來做響應式佈局實在
Android 實現ListView item的左滑(右滑)監聽事件 swipemenulistview
這篇文章將會介紹我是如何學習item的左滑監聽事件設定的,首先我們先新增依賴: compile ‘com.baoyz.swipemenulistview:library:1.3.+’ 可以看到,我們是藉助大神所寫的swipemenulistView這個空
IOS開發之非同步載入網路圖片並快取本地實現瀑布流(一)
</pre><pre name="code" class="objc"></pre><pre name="code" class="objc">在前面的一篇部落格中,我寫了一個瀑布流照片牆的程式,由於之前的程式載入的圖片是本
問題:關於貼友的一個書本頁面簡單佈局(html+css)的實現
貼友需求:以html+css仿照書本的頁面實現佈局效果(見圖) html程式碼: 1: <!-- 我的部落格:http://www.ido321.com --> 2: &
android 自己定義dialog並實現失去焦點(背景透明)的功能
super 效果 andro 教程 his 布局 .com tle near 前言:因為在項目中須要用到更新顯示動畫的需求,所以想到了dialog,自己定義dialog不難。網上教程非常多,可是在實現dialog背景透明的需求時,遇到了一點問題。網上的一些方法在我的機器
vue 實現 tomato timer(蕃茄鐘)
mon 6.2 idt gif 8.0 時間管理 無效 img false 近期在學習【時間管理】方面的課程,其中有一期講了蕃茄工作法,發現是個好多東西。蕃茄工作法核心思想就是:工作25分鐘,休息5分鐘。如果您好了解更多可以自行度娘。 在加上本人是一個程序猿,就想用程序的方
box-shadow實現移動端(Retina屏)超細邊框
屬性 png color ice com 移動 .com alt 方法 // box-shadow投影方向 // 上 box-shadow: inset 0px 1px 0px 0px #000; // 右 box-shadow: inset -1px 0px 0p
JQeury添加和刪除class內部實現代碼(簡化版)
就是 while bsp span indexof val 元素 move 添加 下面是JQuery對元素class操作的簡單實現,請看代碼: 添加class: //增加class function addClass(elem,value)
c語言實現按層次(廣度優先)非遞歸遍歷二叉鏈樹
child str sizeof att col std 二叉樹 頭結點 oot 1 #include<stdio.h> 2 #include<conio.h> 4 #include<malloc.h> 5 typedef cha
F. PHP中利用PHPMailer配合QQ郵箱實現發郵件(最實用)
收信 tab blank post .html lan oauth 發件人 足夠 前言:由於作業的需要,要實現給我們的網站用戶發送郵件,於是就有了這篇博客。以下的內容是我結合網上的例子加上自己的實踐的出來的。希望對大家有幫助。PHPMailer的介紹:優點:可運行在任何平臺
轉:TensorFlow入門(六) 雙端 LSTM 實現序列標註(分詞)
vsm max poc 代碼 單詞 arch 大致 雙端 fun http://blog.csdn.net/Jerr__y/article/details/70471066 歡迎轉載,但請務必註明原文出處及作者信息。 @author: huangyongye @creat_
Java實現AOP切面(動態代理)
定義 row ack tcl getc java的反射機制 div implement reat Java.lang.reflect包下,提供了實現代理機制的接口和類: public interface InvocationHandler InvocationHandl
activiti6.0 提交流程至某節點 ,可用於實現駁回操作(未測試)
完成 activit sets exce condition d3d pri class mit /** * @param task 任務Id * @param variables ... * @param targetActivity
vue-router 實現導航守衛(路由衛士)
router strong class onerror api date console .org nbsp 路由跳轉前做一些驗證,比如登錄驗證,是網站中的普遍需求。 對此,vue-route 提供的 beforeRouteUpdate 可以方便地實現導航守衛(naviga
wpf 實現實時毛玻璃(live blur)效果
() 參數 顯示 top cli gif etc har led 原文:wpf 實現實時毛玻璃(live blur)效果 I2OS7發布後,就被它的時實模糊吸引了,就想著能不能
mxGraph實現魚骨圖(因果圖)(轉自CSDN,鏈接附於文中)
view rto https bind right drawpath point sub nta 魚骨圖由日本管理大師石川馨先生所發明,故又名石川圖。魚骨圖是一種發現問題“根本原因”的方法,它也可以稱之為“Ishikawa”或者“因果圖”。其特點是簡捷實用,深入直觀。它看
實現從oss(阿里雲)伺服器以附件形式下載檔案(含批量下載)
轉載自:https://blog.csdn.net/sinat_28771747/article/details/53520253 筆者在專案中寫一個從阿里雲伺服器上面以附件形式下載檔案的介面時,遇到了問題,網上搜索無任何相關的解決方案,最後通過通過自己查閱API文件,再結合自己的經驗,實現了下
2、Tomcat叢集,並用Nginx實現負載均衡(win環境)
1、Tomcat的配置 1、系統環境變數配置: 首先要實現Tomcat的叢集就得擁有多個tomcat,所以我在本地電腦下載了兩個Tomcat,我這裡使用的是Tomcat7,當然,配置與Tomcat的版本沒多大關係~ 下載之後我們先來配置好環境變數: 在我們的系統變數中增加上