ReactNative列表ListView的用法


Posted in Javascript onAugust 02, 2017

最近在学习ReactNative,本文介绍了ReactNative列表ListView的用法,分享给大家,也给自己留个笔记

ListView

在Android中,如果我们需要显示一个ListView,有两项是比不可少的,首先是ListView的数据源,其次是ListView每个item的样式。ReactNative中一样。首先我们来看一个简单的例子:

constructor(props) {
   super(props);
   var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
   this.state = {
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
   };
  },

  render() {
   return (
    <ListView
     dataSource={this.state.dataSource}
     renderRow={(rowData) => <Text>{rowData}</Text>}
    />
   );
  },

在render()中,我们渲染一个ListView,在ListView的属性中,我们指定了dataSource和renderRow,这两个属性分别代表ListView的数据源和渲染的每一行。

dataSource

如果我们要创建一个数据源,最基本的方法就是创建一个ListView.DataSource数据源,然后通过cloneWithRows方法为其传递一个数组。

其中提供给数据源的rowHasChanged函数可以告诉ListView它是否需要重绘一行数据,即数据是否发生了改变,即在需要重绘界面的时候会进行判断,如果之前页面中的改行数据没有发生变化,则不再进行重绘,否则进行重绘。

如上述代码,我们对数据源设置数据时直接传入一个数组,当然我们也可以通过一个获取数据的方法,在设置数据的时候调用方法即可:

constructor(props){
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(this._genRows()),
    };
  }

  _genRows(){
    const dataBlob = [];
    for(let i = 0 ; i< 200 ; i ++ ){
      dataBlob.push("aa"+i);
    }
    return dataBlob;
  }

这样通过方法获取数据,方便我们进行一些逻辑的处理。

renderRow

(rowData, sectionID, rowID, highlightRow) => renderable

该属性需要传入一个方法,该方法如上所示,他会从数据源中接受一条数据,以及他和他所在的section的Id,返回一个可渲染的组件来为这行数据进行渲染,默认情况下参数中的数据就是放进数据源中的数据本身,不过也可以提供一些转换器。

如果某一行正在被高亮(通过调用highlightRow函数),ListView会得到相应的通知。当一行被高亮时,其两侧的分割线会被隐藏。行的高亮状态可以通过调用highlightRow(null)来重置。

_renderRow(rowData, sectionID, rowID){
    return (
        <View>
          <Text>{"rowData:"+rowData+"  rowId:"+rowID}</Text>
        </View>
      );
  }

  render() {
   return (
    <ListView
     dataSource={this.state.dataSource}
     renderRow={this._renderRow}
    />
   );
  },

因为renderRow中的方法会自动接受从数据源中的一条数据,因此我们可以通过调用外部方法的方式进行实现,同时只需要在外部方法的参数中传入我们需要从数据源中获取的数据即可,如上代码所示。

当我们需要实现比较复杂的布局时,也可以通过导入外部组件的方式作为ListView的每一行的样式。

例如我们自定义了一个组件Item_MyListView,我们需要在文件开头通过import方式将其导入到当前组件中:

import Item_MyListView from './Item_MyListView';

然后就可以通过导入的名称直接使用我们导入的组件了:

_renderRow(rowData, sectionID, rowID){
    return (
      <TouchableOpacity onPress={this._pressRow}>
        <View>
          <Text>{"rowData:"+rowData+"  rowId:"+rowID}</Text>
          <Item_MyListView></Item_MyListView>
        </View>
      </TouchableOpacity>
      );
  }

ListView的点击

当我们需要给ListView的每一行添加点击事件时,只需要在其外层包裹一层TouchableOpacity或者TouchableHighlight,定义好onPress方法即可。

如下代码所示:

_pressRow(rowID){
    alert("hellow"+rowID);
  }

  _renderRow(rowData, sectionID, rowID){
    return (
      <TouchableOpacity onPress={()=>this._pressRow(rowID)}>
        <View>
          <Text>{"rowData:"+rowData+"  rowId:"+rowID}</Text>
          <Item_MyListView info={rowData}></Item_MyListView>
        </View>
      </TouchableOpacity>
      );
  }

需要注意的是,在ListView的renderRow属性中调用_renderRow一定要绑定this,否则onPress中的this就会指向错误,如下所示:

 <ListView dataSource={this.state.dataSource} renderRow={this._renderRow.bind(this)}/>

 

完整代码如下所示:

import React,{
  View,
  Text,
  TouchableOpacity,
  ListView,
} from 'react-native';

import Item_MyListView from './Item_MyListView';

export default class SecondPageComponent extends React.Component{

  constructor(props){
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(this._genRows()),
    };


  }

  _genRows(){
    const dataBlob = [];
    for(let i = 0 ; i< 200 ; i ++ ){
      dataBlob.push("aa"+i);
    }
    return dataBlob;
  }

  _pressRow(rowID){
    alert("hellow"+rowID);
  }

  _renderRow(rowData, sectionID, rowID){
    return (
      <TouchableOpacity onPress={()=>this._pressRow(rowID)}>
        <View>
        <Text>{"rowData:"+rowData+"  rowId:"+rowID}</Text>
        <Item_MyListView info={rowData}></Item_MyListView>
        </View>
      </TouchableOpacity>
      );
  }


  render(){
    return (
      <View style={{flex:1,}}>
        <ListView dataSource={this.state.dataSource} renderRow={this._renderRow.bind(this)}/>
      </View>
      );
  }
}

 其中Item_MyListView只是随意定义了一个组件,没什么实际意义,就不再展示。

最终效果如下图所示:

ReactNative列表ListView的用法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
jQuery select控制插件
Aug 17 Javascript
关于jQuery的inArray 方法介绍
Oct 08 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
js打造数组转json函数
Jan 14 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 #Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 #Javascript
easyui-datagrid开发实践(总结)
Aug 02 #Javascript
js如何编写简单的ajax方法库
Aug 02 #Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 #Javascript
基于jquery实现多选下拉列表
Aug 02 #jQuery
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 #Javascript
You might like
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
python发送告警邮件脚本
2018/09/17 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
善意的谎言事例
2014/02/15 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
音乐幼师求职信
2014/07/09 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
农村老人去世追悼词
2015/06/23 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android