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 相关文章推荐
基于jquery的回到页面顶部按钮
Jun 27 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
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
第十五节--Zend引擎的发展
2006/11/16 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
js数组去重的hash方法
2016/12/22 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
浅析Python中的多条件排序实现
2016/06/07 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Django框架封装外部函数示例
2019/05/28 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
python数据类型强制转换实例详解
2020/06/22 Python
NULL是什么,它是怎么定义的
2015/05/09 面试题
实现向右循环移位
2014/07/31 面试题
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
课程改革实施方案
2014/03/16 职场文书
学校三节实施方案
2014/06/09 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
员工手册董事长致辞
2015/07/29 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题