前言
-
學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)，沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí)
-
本人接觸 React Native 時間并不是特別長，所以對其中的內(nèi)容和性質(zhì)了解可能會有所偏差，在學(xué)習(xí)中如果有錯會及時修改內(nèi)容，也歡迎萬能的朋友們批評指出，謝謝
-
文章第一版出自簡書，如果出現(xiàn)圖片或頁面顯示問題，煩請轉(zhuǎn)至 簡書 查看 也希望喜歡的朋友可以點贊，謝謝
ListView組件介紹
- ListView組件是React Native中一個比較核心的組件，用途非常廣，設(shè)計初衷就是用來高效的展示垂直滾動的列表數(shù)據(jù)
- ListView 繼承了 ScrollView 的所有屬性
-
使用步驟：
-
創(chuàng)建一個ListView.DataSource數(shù)據(jù)源，然后給它傳遞一個普通的數(shù)組數(shù)據(jù)
getInitialState(){ // 初始化數(shù)據(jù)源(rowHasChanged是優(yōu)化的一種手段，只有當(dāng)r1 !== r2的時候才會重新渲染) var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); return{ // 給dataSource傳遞一組 數(shù)組 dataSource: ds.cloneWithRows(['內(nèi)容0', '內(nèi)容1', '內(nèi)容2', '內(nèi)容3', '內(nèi)容4', '內(nèi)容5']) } },-
使用數(shù)據(jù)源實例化一個ListView組件，定義一個renderRow回調(diào)函數(shù)，這個函數(shù)會接受數(shù)組中的每個數(shù)據(jù)作為參數(shù)，并返回一個可渲染的組件（也就是該列表的每一行Item）
render() { return ( <View style={styles.container}> // 根據(jù)數(shù)據(jù)源實例化一個ListView <ListView style={{backgroundColor:'yellow'}} // 獲取數(shù)據(jù)源 dataSource={this.state.dataSource}延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式
-
創(chuàng)建一個ListView.DataSource數(shù)據(jù)源，然后給它傳遞一個普通的數(shù)組數(shù)據(jù)