ListView實作九宮格效果案例
本篇文章主要介紹了React Native之ListView實現九宮格效果的範例,具有一定的參考價值,有興趣的小夥伴們可以參考一下
##概述
##dataSource:數據來源,類似安卓中我們傳入BaseAdapter的資料集合。
renderRow:渲染某一行,類似BaseAdapter中的getItem方法。
onEndReached:簡單說就是用於分頁操作,在安卓中原生開發中,我們需要自己實作對應的方法。
onEndReachedThreshold:呼叫onEndReached之前的臨界值,單位是像素。
refreshControl:指定RefreshControl元件,用於為ScrollView提供下拉式刷新功能。 (該屬性是繼承與ScrollView)
renderHeader:渲染頭部View,類似安卓ListView中的addHeader.
以上的屬性基本上可以解決一些常見的清單需求,如果我們想要實現網格的效果,也可以藉助該元件來實現,有點類似安卓中的RecyclerView控制項。
pageSize:渲染的網格數,類似安卓GridView中的numColumns.
contentContainerStyle:此屬性是繼承於ScrollView,主要作用於該元件的內容容器上。
要用ListView實作九宮格的效果:
1,設定pageSize確認網格數量
<ListView automaticallyAdjustContentInsets={false} contentContainerStyle={styles.grid} dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} pageSize={3} refreshControl={ <RefreshControl onRefresh={this.onRefresh.bind(this)} refreshing={this.state.isLoading} colors={['#ff0000', '#00ff00', '#0000ff']} enabled={true} /> } />
2,設定每個網格的寬度樣式
itemLayout:{ flex:1, width:Util.size.width/3, height:Util.size.width/3, alignItems:'center', justifyContent:'center', borderWidth: Util.pixel, borderColor: '#eaeaea' },
3,設定contentContainerStyle對應屬性
grid: { justifyContent: 'space-around', flexDirection: 'row', flexWrap: 'wrap' },
這裡要說明下,由於ListView的預設方向是縱向的,所以需要設定ListView的contentContainerStyle屬性,加入flexDirection:'row'。其次,ListView在同一行顯示,而且透過flexWrap:'wrap'設定自動換行。
註:flexWrap屬性:wrap、nowrap,wrap:空間不足的情況下自動換行,nowrap:空間不足,壓縮容器,不會自動換行。
以下是完整程式碼:
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, Image, TouchableOpacity, // 不透明触摸 AlertIOS } from 'react-native'; // 获取屏幕宽度 var Dimensions = require('Dimensions'); const screenW = Dimensions.get('window').width; // 导入json数据 var shareData = require('./shareData.json'); // 一些常亮设置 const cols = 3; const cellWH = 100; const vMargin = (screenW - cellWH * cols) / (cols + 1); const hMargin = 25; // ES5 var ListViewDemo = React.createClass({ // 初始化状态值(可以变化) getInitialState(){ // 创建数据源 var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2}); return{ dataSource:ds.cloneWithRows(shareData.data) } }, render(){ return( <ListView dataSource={this.state.dataSource} renderRow={this.renderRow} contentContainerStyle={styles.listViewStyle} /> ); }, // 返回cell renderRow(rowData){ return( <TouchableOpacity activeOpacity={0.8} onPress={()=>{AlertIOS.alert('点击了')}} > <View style={styles.innerViewStyle}> <Image source={{uri:rowData.icon}} style={styles.iconStyle} /> <Text>{rowData.title}</Text> </View> </TouchableOpacity> ); }, }); const styles = StyleSheet.create({ listViewStyle:{ // 主轴方向 flexDirection:'row', // 一行显示不下,换一行 flexWrap:'wrap', // 侧轴方向 alignItems:'center', // 必须设置,否则换行不起作用 }, innerViewStyle:{ width:cellWH, height:cellWH, marginLeft:vMargin, marginTop:hMargin, // 文字内容居中对齐 alignItems:'center' }, iconStyle:{ width:80, height:80, }, }); AppRegistry.registerComponent('ListViewDemo', () => ListViewDemo);
效果如圖(資料來源本身加)
#
以上是ListView實作九宮格效果案例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

長期以來,InternetExplorer的失寵一直不是秘密,但隨著Windows11的到來,現實開始了。 Edge將來不再有時取代IE,它現在是微軟最新作業系統中的預設瀏覽器。目前,您仍然可以在Windows11中啟用InternetExplorer。但是,IE11(最新版本)已經有了一個正式的退役日期,即2022年6月15日,時間在流逝。考慮到這一點,您可能已經注意到InternetExplorer有時會打開Edge,而您可能不喜歡它。那為什麼會這樣呢?在

越來越多的用戶開始升級win11系統,由於每個用戶的使用習慣不同,還是有不少用戶在使用ie11瀏覽器,那麼win11系統用不了ie瀏覽器,該怎麼辦呢? windows11還支援ie11嗎?下面就來看看解決方法。 win11無法使用ie11瀏覽器的解決方法1、先右鍵開始選單,選擇「命令提示字元(管理員)」開啟。 2.開啟之後,直接輸入“Netshwinsockreset”,回車確定。 3.確定之後再輸入「netshadvfirewallreset&rdqu

2022年6月15日是Microsoft結束對InternetExplorer11(IE11)的支援並關閉其舊版瀏覽器章節的日子。一段時間以來,該公司一直在提醒用戶注意這一生命週期結束日期,並呼籲他們計劃遷移到MicrosoftEdge。 Microsoft將IE11與Windows8.1捆綁在一起,作為Windows的現代預設網頁瀏覽器。儘管它從未達到Chrome的(目前)高度,但它是2014年使用量第二大的桌面瀏覽器,僅次於IE8。當然,隨著20

近期不少的win10用戶們在使用電腦瀏覽器的時候發現自己的ie瀏覽器總是自動的跳到edge瀏覽器,那麼win10打開ie自動跳轉edge怎麼關閉?。下面就讓本站來為用戶們來仔細的介紹一下win10打開ie自動跳轉edge關閉方法吧。 1.我們登入edge瀏覽器,點選右上角...,找下拉的設定選項。 2.我們進入設定後,在左側欄點選預設瀏覽器。 3.最後我們在相容性中,勾選不允許IE模式下重新載入網站,重啟ie瀏覽器即可。

ie加速功能怎麼開? ie打開網頁的速度太慢,我們可以在裡面開啟硬體加速模式。很多小夥伴反應說使用ie瀏覽器的時候,開啟網頁的速度特別的慢,這樣對我們瀏覽網頁也造成了一定影響。就想詢問小編有什麼解決辦法,這種情況是可以開啟ie瀏覽器的硬體加速模式,小編下面整理了ie開啟加速功能方法,感興趣的話一起往下看看! ie開啟加速功能方法開啟IE安全瀏覽器,點選右上角齒輪狀的「設定」圖標,選擇「Internet選項」進入,如圖所示。 2、在Internet選項的視窗頭部的標籤導航中點擊“進階”,如圖所示。 3、

ie捷徑無法刪除的解決方法:1、權限問題;2、捷徑損壞;3、軟體衝突;4、登錄問題;5、惡意軟體;6、系統問題;7、重新安裝IE;8、使用第三方工具;9、檢查捷徑的目標路徑;10、考慮其他因素;11、諮詢專業人士。詳細介紹:1、權限問題,右鍵點擊快捷方式,選擇“屬性”,在“安全性”選項卡中,確保有足夠的權限刪除該快捷方式,如果沒有,可以嘗試以管理員身份運行等等。

win7如何卸載ie9?計算機能處理工作中的事情,也能做追劇。和追劇一樣,我們通常是用瀏覽器看的,因為瀏覽器越來越多,功能也很完善,所以現在使用ie9瀏覽器的人越來越少,那麼win7怎麼卸載瀏覽器,看看win7系統卸載ie9瀏覽器的方法。 win7如何卸載ie9瀏覽器。 1.首先,雙擊開啟MyPC,選擇卸載或更換程式;2.然後找到“ViewInstallUpdate”,然後點開。你可以在裡面找到"windowsinternetexplorer9",然後右鍵刪除。上面是小編帶著wi

許多使用者習慣使用了Windows的ie瀏覽器,但是發現自己在升級win11系統後,系統中找不到ie瀏覽器了,因此想要知道win11是否自備ie瀏覽器,下面就跟著小編一起來看一下吧。 win11自備ie瀏覽器嗎:答:win11不自備ie瀏覽器了。 1.微軟先前就表示win11系統將不再自備ie瀏覽器。 2.不過我們可以透過win11中的edge瀏覽器開啟ie模式。 3.先點選右上角的三個點,如圖所示。 4.接著在開啟的選單中點選「設定」。 5、然後在左側邊欄中找到並進入“預設瀏覽器”6、在其中將允許ie模式
