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