Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
基础篇章:关于 React Native 之 ListView 组件的讲解
(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 我们讲完ScrollView组件,其实顺其自然的就应该讲解ListView,对于前段
非著名程序员
2018/02/09
2.3K0
基础篇章:关于 React Native 之 ListView 组件的讲解
React Native 系列(七) -- ListView
前言 本系列是基于React Native版本号0.44.3写的。几乎所有的App都使用了ListView这种组件,这篇文章将学习RN中ListView的平铺样式和分组样式。 ListView平铺样式 ListView内部是通过ListViewDataSource这个对象显示数据的,因此使用ListView的时候需要创建一个ListViewDataSource对象。 ListViewDataSource构造方法创建对象的时候可以选择性出入4个参数,描述怎么提取cell,怎么刷新cell 这些参数都是函数,当
Scott_Mr
2018/05/16
1.4K0
React Native ios开发第一课
前言 本篇文章的作用在于帮助你快速上手使用React Native编写iOS应用。如果你现在还不太了解React Native是什么以及Facebook为什么要创建React Native,你可以先看看这篇博客。 阅读本文之前,我们假设你已经有过使用React创建网站的经验。如果你还是一个React新手,那么我们建议你从React的网站开始学习。 设置 使用React Native开发iOS应用需要OSX系统,Xcode,Homebrew,node,npm以及watchman,你也可以有选择的使用Flo
xiangzhihong
2018/02/05
1.8K0
React Native ios开发第一课
React-Native简介
本文介绍如何使用React Native开发Android原生应用,通过实例演示了如何利用React Native开发简单的Android原生应用,包括如何使用React Native的组件和布局、如何调用原生模块等。同时,文章还介绍了如何为React Native项目添加自定义UI组件,以及如何调用原生模块。
IMWeb前端团队
2017/12/29
2K0
React-Native简介
基础篇章:关于 React Native 之 RefreshControl 组件的讲解
(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 我们已经讲完了 ScrollView 和 ListView ,自然而然我们就应该讲的组件就是下拉刷新的喽,因为它们几个是兄弟,常常一块出现,就跟打麻将似的,四缺一不能打,那它们三就是斗地主,三缺一不能玩。今天讲的这个组件就是它们的兄弟:RefreshControl 。 介绍 我的母亲官网是这么介绍我的,说:我是大家在使用我的兄弟ScrollView或ListView添加拉刷新功能用的,我们几个
非著名程序员
2018/02/09
1.8K0
基础篇章:关于 React Native 之 RefreshControl 组件的讲解
ReactNative-ListView
这只是一个简单的listView的小demo 初始化项目之后,index.ios.js代码如下 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView } from 'reac
czjwarrior
2018/05/28
9060
React Native控件之Listview
ListView组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同。 ListView更适于长列表数据,且元素个数可以增删。和ScrollView不同的是,ListView并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。 ListView组件必须的两个属性是dataSource和renderRow。dataSource是列表的数据源,而renderRow则逐个解析数据源中的数据,然后返回一个设定好格式的组件来渲染。 下面的例子创建了一个简单的ListView,并预设了一些模拟数据。首先是
xiangzhihong
2018/02/05
8060
RN实现ListView
(1)实现单个item import React, {Component, PropTypes} from 'react'; import { AppRegistry, StyleSheet, Text, View, Dimensions, Platform, Image } from 'react-native'; const {width, height} = Dimensions.get('window'); export default c
提莫队长
2018/05/18
1.3K0
ReactNative-综合案例(02)
最近几天学了几个ReactNative组件,总觉得单纯的学几个组件进步慢,所以我打算做一些综合性的小案例,练习下实战,我从网上找到一个小案例 ,感觉挺好,也学习了很多,代码内容可能不太一样,主要区别是:我把RN官方不推荐或者已经放弃了的组件进行了替换,如果有需要的可以互相参考下 接着上篇案例开始写,这篇文章将会讲解如何编写轮播图和列表 源代码下载 首先WYHome.js代码如下: import React, { Component } from 'react'; import { StyleS
czjwarrior
2018/05/28
8250
一个简单的ReactNative demo
本人非前端,请轻喷 ReactNative版本:0.31 github:https://github.com/X-FAN/reactnativelearn
夏洛克的猫
2018/10/18
2.1K0
一个简单的ReactNative demo
5. ListView应用
ListView大概是所有移动应用都会用到的组件了,大部分都在首页,这章结合redux来看如何从API取数据再到如何应用redux更新渲染组件ListView。
MasterVin
2018/08/30
6340
5. ListView应用
7. 偷用Swiper简改
看这段代码应该就很清楚了,如果是android系统就渲染Pager如果是ios就使用横向的ScrollView,修改后的app首页如下:
MasterVin
2018/08/30
2.1K0
7. 偷用Swiper简改
React-Native踩坑记
最近使用react-native参与开发了个应用,记录下其中踩的一些坑。本人使用的是mac电脑进行开发,本文仅对此平台进行记录? 下载不了xcode 升级自己的mac的系统到最新版本,之后在mac的应
Jimmy_is_jimmy
2020/10/15
2.2K0
移动跨平台框架ReactNative网络请求【19】
React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件,而是基于 React,React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库,因此会有更丰富的 UI 体验效果,同时也能够很好地调用底层框架的UI使用。 ReactNative网络请求 1.GET请求 requestToTest() { return fetch(api
江一铭
2022/06/17
6010
React Native之ListView实现九宫格效果
概述 在安卓原生开发中,ListView是很常用的一个列表控件,那么React Native(RN)如何实现该功能呢?我们来看一下ListView的源码 ListView是基于ScrollView扩展
xiangzhihong
2018/02/05
2.9K0
React Native之ListView实现九宫格效果
React-Native踩坑记
最近使用react-native参与开发了个应用,记录下其中踩的一些坑。本人使用的是mac电脑进行开发,本文仅对此平台进行记录? 下载不了xcode 升级自己的mac的系统到最新版本,之后在mac的应
Jimmy_is_jimmy
2019/07/31
2.4K0
RN请求豆瓣数据
此文适合react-native新手学习使用,侧重点在于Fetch网络请求、ListView数据源配置及展示。 项目中使用豆瓣网提供的开放数据接口 http://www.jianshu.com/p/c5160fda1d38 Util工具类封装 Util工具类封装了获取设备屏幕宽高、网络请求成功或者失败回调函数、数据请求成功前的等待效果. /* 工具类 */ import React, { Component} from 'react'; import { AppRegistry, StyleShee
IT架构圈
2018/05/31
1.1K0
react native 入门实战(一)
作者:朱灵子 本文举一个简单的例子介绍如何进行react native实战开发,主要从以下几个方面来进行介绍: 如何在mac IOS下进行react native环境配置 写一个简单的例子,分析rea
腾讯IVWEB团队
2017/04/27
8.8K0
React Native仿美团下拉菜单
在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可。如果使用React Native开发上面的效果,需
xiangzhihong
2018/01/26
5.4K0
React native城市列表组件
城市列表选择是很多app共有的功能,比如典型的美图app。那么对于React Native怎么实现呢? 要实现上面的效果,首先需要对界面的组成简单分析,界面的数据主要由当前城市,历史访问城市和热门城
xiangzhihong
2018/01/26
2.5K0
相关推荐
基础篇章:关于 React Native 之 ListView 组件的讲解
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档