首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >React Native控件之ListView

React Native控件之ListView

作者头像
xiangzhihong
发布于 2018-02-06 08:32:48
发布于 2018-02-06 08:32:48
1.7K00
代码可运行
举报
文章被收录于专栏:向治洪向治洪
运行总次数:0
代码可运行

概述

ListView作为核心组件之一,主要用于高效地显示一个可以垂直滚动的变化的数据列表。经过自定义组装,我们还可以用它实现九宫格等页面效果。 在React Native中,使用ListView组件至少需要两个属性:DataSource和renderRow。DataSource是需要渲染界面的数据源,renderRow是根据数据源的元素返回的可渲染的组件,即ListView的一行。 在React Native中,最基本的使用方式就是创建一个ListView.DataSource数据源,然后给它传递一个普通的数据数组,再使用数据源来实例化一个ListView组件,并且定义它的renderRow回调函数,这个函数返回ListView的一行作为一个可渲染的组件。例如,官网提供的ListView示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
constructor(props) {
  super(props);
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  this.state = {
    dataSource: ds.cloneWithRows(['第一行', '第二行', '第三行']),
  };
}
//省略…
render() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text>{rowData}</Text>}
    />
  );}

属性

ListView组件主要有两个属性:dataSource和renderRow。其他常用的属性如下: dataSource 数据源 renderRow ListView渲染的每一item view initialListSize 初始渲染item的个数 pageSize 每次事件循环(每帧)渲染的行数 onEndReachedThreshold 调用onEndReached之前的临界值,单位是像素 onEndReached 当所有的数据都已经渲染过,并且列表被滚动到距离最底部不onEndReachedThreshold个像素的距离时调用

获取网络数据渲染界面

从现在开始,我们将实现一个从网络获取数据并使用ListView控件渲染界面的过程。效果如下:

1,创建构造器

我们在构造器中声明了一个成员变量state,并为它定义了两个属性,dataSource和loaded 。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
constructor(props) {  
    super(props);  
    this.state = {  
        dataSource: new ListView.DataSource({  
            rowHasChanged: function(row1, row2) {return row1 !== row2},  
        }),  
        loaded: false,  
    };  
}

由于dataSource是弱类型,所以不用声名类型,重点看ListView实例化的部分。rowHasChanged是ListView必须要实现的一个function,否则会报错。一般我们会使用下面的简洁写法:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
rowHasChanged: (row1, row2) => row1 !== row2  

2,处理componentDidMount回调

Component有一个回调函数componentDidMount(),它在所有UI组建加载完成后会被调用,类似于Android中Activity生命周期的onCreate,通常我们在它被回调的时候发起网络请求。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
componentDidMount(){  
this.fetchData();  
}  

fetchData方法是我们自定义的请求网络的方法 。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 fetchData() {  
     fetch(REQUEST_URL)  
         .then((response) => response.json())  
         .then((responseData) => {  
 console.log(responseData);  
             this.setState({  
                 dataSource: this.state.dataSource.cloneWithRows(responseData.movies),  
                 loaded: true,  
             });  
         }).catch(function(e){         

})  
         .done();  
 }  

当网络返回数据之后,我们需要对dataSource进行通知更新操作。

3,渲染单个Cell视图

ListView界面由一个一个子视图组成,我们需要在render的时候渲染子视图,通常为了代码维护的方便,我们会将子视图通过自定义为视图使用。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
renderCell(cellData) {
       return (
           <View style={styles.cellContainer}>
               <Image
                  //  source={{uri:cellData.pic}}
                  source={require('./image/defalt_image.png')}
                   style={styles.thumbnail}
               />
               <View style={styles.itemCellView}>
                   <Text numberOfLines={1} style={styles.title}>{cellData.title}</Text>
                   <Text numberOfLines={1} style={styles.id}>{cellData.actor}</Text>
               </View>
           </View>
       );
   }

}

4,ListView渲染整个界面

使用ListView渲染整个界面。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
return (  
            <ListView  
                dataSource={this.state.dataSource}  
                renderRow={this.renderMovie}  
                style={styles.listView}  
            />  
        );

以下为全部代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import React, {  
    Component,  
} from 'react';  

import {  
     AppRegistry,  
     Image,  
     StyleSheet,  
     Text,  
     View,  
     ListView,  
 } from 'react-native';  



 var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';  


 class DemoProject extends Component  
 {  
     constructor(props) {  
         super(props);  
         this.state = {  
             dataSource: new ListView.DataSource({  
                 rowHasChanged: (row1, row2) => row1 !== row2,  
             }),  
             loaded: false,  
         };  
     }  

     componentDidMount(){  
         this.fetchData();  
     }  

     fetchData() {  
         fetch(REQUEST_URL)  
             .then((response) => response.json())  
             .then((responseData) => {  
                 console.log(responseData);  
                 this.setState({  
                     dataSource: this.state.dataSource.cloneWithRows(responseData.movies),  
                     loaded: true,  
                 });  
             }).catch(function(e){  

             })  
             .done();  
     }  

     render() {  
         if (!this.state.loaded) {  
             return this.renderLoadingView();  
         }  

         return (  
             <ListView  
                 dataSource={this.state.dataSource}  
                 renderRow={this.renderMovie}  
                 style={styles.listView}  
             />  

         );  
     }  

     renderLoadingView()  
     {  
         return (<View style={styles.container} >  
                 <Text>Loading movies......</Text>  
             </View>  

         );  
     }  

     renderMovie(movie) {  
         return (  
             <View style={styles.container}>  
                 <Image  
                     source={{uri: movie.posters.thumbnail}}  
                     style={styles.thumbnail}  
                 />  
                 <View style={styles.rightContainer}>  
                     <Text style={styles.title}>{movie.title}</Text>  
                     <Text style={styles.year}>{movie.year}</Text>  
                 </View>  
             </View>  
         );  
     }  


 };  


 var styles = StyleSheet.create({  
     container: {  
         flex: 1,  
         flexDirection: 'row',  
         justifyContent: 'center',  
         alignItems: 'center',  
         backgroundColor: '#F5FCFF',  
     },  
     rightContainer: {  
         flex: 1,  
     },  
     title: {  
         fontSize: 20,  
         marginBottom: 8,  
         textAlign: 'center',  
     },  
     year: {  
         textAlign: 'center',  
     },  
     thumbnail: {  
         width: 53,  
         height: 81,  
     },  
     listView: {  
         paddingTop: 20,  
         backgroundColor: '#F5FCFF',  
     },  
 });  
 AppRegistry.registerComponent('AwesomeProject', () => DemoProject);  

注:如果你读取的是本地的数据,可以通过require获取,例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let data=require('./data/list.json');
      this.setState({
          dataSource:this.state.dataSource.cloneWithRows(data.list),
      });

附:ListView示例代码

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-05-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Loop Team希望给远程工作人员一个上班的感觉
当我们在流感大流行期间搬到家里工作时,远程工作者感到与外界联系是一个挑战。Loop Team是企业沟通领域的新成员,他认为我们沟通的方式需要改进。这就是为什么这家初创公司今天发布了Loop Team,这是一个试图用软件重现在办公室体验的工具。公司创始人兼首席执行官拉吉·辛格说,他曾在一家以远程服务为优先的公司亲身体验过被孤立的感觉,尽管他尽了最大努力利用科技来产生办公室里的感觉,他说他仍然有被孤立的感觉(可以说)。于是他决定构建他想要的解决方案。
甜甜圈
2020/12/04
3490
专注于OKR的Gtmhub在2020年增长3倍后筹集了3000万美元的B轮融资
今天上午,跨国公司Gtmhub致力于开发软件来帮助其他公司管理公司计划,该公司宣布已筹集了3,000万美元的B轮融资。本轮融资由Insight领投,新投资者Singular和之前的LauncHub以及CRV。 Gtmhub大约在13个月前筹集了900万美元的A轮融资。当时,新资金超过了之前的融资总额。这家初创公司的新一轮融资(如其2019年A轮融资)以类似的方式高出其先前的融资总额。 Gtmhub如何筹集了这么多钱?总之,增长。 TechCrunch在其A轮融资时报告说,Gtmhub的年度经常性收入(ARR)同比增长了400%。 Gtmhub首席运营官塞思·埃利奥特(Gethmhub首席运营官塞思·埃利奥特(Seth Elliott)告诉TechCrunch,该公司的ARR去年增长了三倍(从2019年12月到2020年12月)。 在Gtmhub在2019年筹集资金的同时,也有许多其他初创公司也专注于同一软件市场,导致TechCrunch询问“为什么每个人都在开发OKR软件?” OKR的首字母缩写翻译为“目标和关键结果”,这是一种计划方法,已在美国科技公司中流行,并且据Elliott称,在国际上和非科技公司中也越来越流行。 这位初创公司高管还告诉TechCrunch,他认为Gtmhub伴随着两种业务趋势而增长。他告诉TechCrunch,首先是OKR本身的崛起,这是他的公司乘风破浪的一年。第二个是他认为自己的创业公司处于领先地位的公司,它与追求公司转型以提高敏捷性的大公司打交道;他说,这些公司正在采用Gtmhub,这可以帮助他们成功地进行数字化转型或类似的努力。
YH
2021/01/12
6020
亚特兰大的SalesLoft为其数字销售平台筹集了1亿美元,目前总值为1.1B美元
COVID-19大流行,特别是需要通过社交活动来减慢病毒的传播,这继续使我们许多人远离办公室。现在,越来越多的组织和人们相信,它可能会带来更永久的向远程,分布式和虚拟工作的转变。如今,一家初创公司已经建立了一套专门用于通过数字化销售方式帮助销售人员应对这种变化的工具,从而筹集了巨大的增长资金来满足这一需求。
木樾233
2021/01/15
1K0
Arya筹集了2100万美元,为印度农民提供融资和收获后服务
印度农民生产的单产中只有大约三分之一到达了大市场。那些今天生产农产品的人可以利用收获后的服务。其他所有人都错过了。
甜甜圈
2020/12/18
4270
Healthvana的数字COVID-19疫苗接种记录关于交流而非免疫护照
随着针对COVID-19的疫苗接种的进行(尽管起步艰难),许多公司正在尝试以各种方式支持推广。 Healthvana是一家健康科技初创公司,最初专注于为艾滋病病毒感染者提供数字化患者信息,目前正在使用苹果的Wallet技术帮助洛杉矶县推出COVID-19的移动疫苗记录。对这项技术的实施情况进行的粗略评估可能会导致人们认为这是关于为个人提供容易的疫苗接种证明,但是该技术和Healthvana专注于告知个人以确保他们参与自己的医疗保健计划,而不是提供免疫力通过。
木樾233
2021/01/15
7220
报告的数据泄露程度在2020年上半年有所下降
2019年,数据泄露猖獗,发生速度之快前所未有。不过,今年上半年,报案事件有所减少。报告是最重要的词。
柴艺
2020/12/18
5510
Hopin以2.5亿美元收购livestreaming初创公司StreamYard,以扩大其产品阵容
今天上午,一家快速成长的初创公司Hopin宣布,它已经收购了StreamYard,这家公司出售一种用于举办数字活动的技术平台。这家被收购的公司将保持其品牌和市场上的产品,这家公司已经将自己提升到了实质性的收入规模。
用户8054111
2021/01/14
1.1K0
Senti Bio为其新的可编程生物学平台和癌症疗法筹集了1.05亿美元
Senti Biosciences是一家使用新的可编程生物学平台开发癌症疗法的公司,该公司表示,该公司已经获得了1.05亿美元的新一轮融资,由生命科学巨头拜耳(Bayer)的风险投资部门牵头。
木樾233
2021/01/15
6890
探索乐趣者在虚拟派对上狂欢
虽然最初是孤立的,但冠状病毒大流行已经催生了一个全新的数字派对和聚会世界。被困在家中的人正在寻找创新的社交方式,参与从虚拟啤酒品尝到在线读书俱乐部会议等一切活动。
zstt8054929
2020/12/10
4320
文字营销初创公司Voxie筹集670万美元
像许多初创公司一样,总部位于亚特兰大的Voxie的成立是为了解决创始人兼首席执行官Bogdan Constantin所面对的问题。 以康斯坦丁为例,这是在他以前的燕尾服租赁初创公司Menguin(最终被Generation Tux收购)那里的,他说他必须以6到9个月的销售周期推销产品,因为客户通常会考虑不同的选择婚礼。 康斯坦丁说,随着时间的流逝,电子邮件营销将导致“恶化”的情况。因此,有一天,他决定尝试向所有签约的人发送短信,将自己介绍为“您在Menguin的个人造型师”。毫不奇怪,他得到了更多答复。 当然,挑战在于在大型客户群中进行这类文本对话。这就是为什么Voxie(宣布已筹集670万美元的A轮融资)提供了工具来帮助企业自动化和管理该流程的原因。 康斯坦丁声称,与其他文本营销工具相比,通过Voxie发送的消息感觉像是一次真实的个性化对话,尽管实际上80%到90%的消息是自动进行的,其余消息都是由人编写的。另外,Voxie将允许企业使用正常的10位电话号码(而不是用于营销的更常见的5位数字)发送消息。
YH
2021/01/12
6640
全息创业公司Envisics与松下合作,快速追踪汽车AR技术
Envisics的创始人兼首席执行官杰米森•圣诞博士(Dr.Jamieson Christmas)三年前启动了这家初创公司,用其全息技术“彻底改变”车内体验。现在,它有了一个伙伴,可以帮助它实现这一使命。
用户8054111
2021/01/14
7400
围绕Kubernetes的流行开源工具建立业务
当你试图在构建为社区带来大量价值的开源工具和经营成功的商业业务之间把握好界限时,你必须把很多事情做好。在“致力于原生云”播客的第七集中,我们与 Richard Li 进行了交谈,他与 Ambassador Labs 成功地完成了这一工作。我们从这次谈话中学到了很多,我们认为你们也会的。
CNCF
2021/05/07
7670
围绕Kubernetes的流行开源工具建立业务
Zipmex致力于建立亚太地区最大的数字资产交易所,Jump Capital领投600万美元
总部位于新加坡的数字资产交易所Zipmex今天宣布已筹集600万美元,由Jump Capital领投。这家计划成为数字资产银行的初创公司表示,这一轮融资超过了其最初的目标400万美元。加上早期的资金,Zipmex迄今已筹集的资金总额达到1,090万美元。
木樾233
2021/01/15
1.3K0
TO GOOD TO GO筹集3100万美元对抗食物浪费
TO GOOD TO GO,这家让你在食物浪费之前购买食物的初创公司正在筹集3110万美元的资金;blisce正在领导这轮融资,并投资1540万美元。现有投资者和员工也参与其中。虽然这家公司已经存在了一段时间,但这是第一次从风投公司融资。
用户8054111
2021/01/14
9340
原创译文 | Sphero发布Spark Bolt,AI机器人进攻教育领域
本文为灯塔大数据原创内容,欢迎个人转载至朋友圈,其他机构转载请在文章开头标注:“转自:灯塔大数据;微信:DTbigdata”
灯塔大数据
2018/10/09
1.5K0
原创译文 | Sphero发布Spark Bolt,AI机器人进攻教育领域
健康和健身应用程序使用AI以获得竞争优势
这些天的面对面锻炼似乎已成为过去,而在家中进行的单独锻炼取代了去健身房的锻炼,这是受到大流行的影响。
zstt8054929
2020/12/25
5580
智能设备生命周期可以拉动安全
使用智能和互联设备可以使我们的生活更加容易,但它也可能让其制造商更好的控制我们的生活。
zstt8054929
2020/12/10
6070
2050年个人通信技术的发展
高通公司最近深入回顾了手机的历史,它主要负责制造手机。这是一个个人的回忆,因为我的家族在20世纪60年代拥有一家电子公司,那是我在我父亲的研究生公司Avanti使用我的第一部手机的时候。
柴艺
2020/12/18
9850
Instagram可能推出“真实朋友”共享应用程序
一个新的应用程序可能允许 Instagram 用户给他们最亲密的朋友分享实时信息,据《Verge》周一报道,该应用名为”Threads”,允许用户与最亲密的Instagram好友自动共享位置、移动和电池续航时间等信息,以及使用Instagram工具生成的文本、视频和照片消息。
甜甜圈
2020/12/04
6760
Jobandtalent的“劳动力即服务”平台获得了1.08亿美元的融资
位于马德里的Jobandtalent是一家数字临时人员管理机构,该公司经营一个双向平台,该平台将临时工与需要运输和物流等行业的定期临时工联系在一起的雇主,已为其C系列增加了8,800万欧元(约合1.08亿美元)的收入-该轮融资较早(2019年)结束后筹集的资金总额为1.66亿欧元。 这家成立于2009年的初创公司在过去十年的运营中迄今已筹集了超过2.9亿美元,但将自己描述为在庞大且不断增长的临时工作市场上崭露头角的旅程的开始,并预计需求将继续增加未来几年,行业和流程将数字化。 Jobandtalent说,去年在欧洲和拉美的七个市场(即西班牙,英国,德国,法国,瑞典,墨西哥和哥伦比亚),已有超过80,000名工人使用其平台来确保临时工作;正如它所说的那样,有750多个雇主签署了“经常管理大部分员工”的合同,其中包括XPO,Ocado,Saint Gobain,桑坦德银行,拜耳,eBay,华为,Ceva Logistics和家乐福。 它专注于与Adecco和Randstad等传统的人员配置公司竞争,尽管其他类似的初创公司也正在涌现,以迎合一个更加不稳定的临时就业市场。 (例如,Uber在2019年发起了一个名为Works的shift-finder应用程序实验,该实验还针对按需劳动力需求,但在这种情况下是与人员编制机构合作完成的。) Jobandtalent报告称,在其平台上寻找临时工作的工人人数每年都在增加一倍,同时其收入已增长至5亿欧元,并称EBITDA达到正值。 它今天说,加强的C轮融资将用于扩大市场,并加倍扩大现有的规模。 联合创始人胡安·乌迪亚莱斯(Juan Urdiales)告诉我们:“我们将继续在欧洲扩展业务,并将考虑一些其他机会(美国和一些拉美国家),并指出其主要市场仍然是西班牙和英国,而其主要领域是物流,英里,仓储和运输。 法国私募股权公司InfraVia是C轮融资的主要投资方,该公司投入了3000万欧元,并通过去年启动的成长科技基金进行了投资,该基金专注于欧洲B2B高增长科技公司。 现有的Jobandtalent投资者,包括Atomico,Seek,DN Capital和Kibo Ventures,也参加了C轮融资。 乌迪亚莱斯说,之所以现在要筹集另一笔资金,是因为随着冠状病毒大流行继续加速对模板的需求,增长机会增加了。他告诉我们:“我们筹集更多资金的原因是,我们现在看到了比预期更快的增长潜力。” “在采用我们的平台方面,大流行帮助了我们,无论是工人还是雇主。” “ Covid加快了许多行业的转型。在过去的九个月中,与过去五年相比,我们采用新技术的次数更多。人才市场正在经历巨大的转变,这种转变将在未来几年中加速,从传统的实体结构转变为数据驱动的平台,这将改善工人和雇主的体验。”乌迪亚莱斯继续说道。 他通过电子邮件补充道:“这个市场确实很大,我们才刚刚开始(即使我们现在已经进入市场很多年了。”)接下来的几年。 “我们认为,如果我们继续按照现在的增长速度增长,并增加一些私人投资者来帮助我们制定增长计划,那么我们可能会保持更长的私有化时间。” 自从十多年前启动以来,Jobtaltalent就经历了许多工作,其想法是使用技术来简化招聘工作中杂乱无章的人力资源。它开始测试多种方法,然后再采用一种语言学算法来解析求职广告并创建警报以在被动求职者中循环播放。 然后在2016年,它从企业招聘转向集中于动员中小型企业的招聘-归因于智能手机应用程序推动的演出工作的增加而提供的临时工作匹配机会的增加。从那里开始,它一直是一种磨练工具,可以满足管理大量临时劳动力的雇主的需求。
YH
2021/01/12
6280
推荐阅读
相关推荐
Loop Team希望给远程工作人员一个上班的感觉
更多 >
交个朋友
加入前端学习入门群
前端基础系统教学 经验分享避坑指南
加入前端工作实战群
前端工程化实践 组件库开发经验分享
加入前端趋势交流群
追踪前端新趋势 交流学习心得
换一批
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验