ReactNative列表ListView的用法

更新时间：2017年08月02日 11:48:35 作者：苍蝇小黑

本篇文章主要介绍了ReactNative列表ListView的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

最近在学习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只是随意定义了一个组件，没什么实际意义，就不再展示。

最终效果如下图所示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解升级react-router 4 踩坑指南
本篇文章主要介绍了详解升级react-router 4 踩坑指南，主要是对react-router 4升级的踩坑总结，有兴趣的可以了解一下
2017-08-08
react+antd实现动态编辑表格数据
这篇文章主要为大家详细介绍了react+antd实现动态编辑表格数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
React团队测试并发特性详解
这篇文章主要为大家介绍了React团队测试并发特性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
React中使用Vditor自定义图片详解
这篇文章主要介绍了React中使用Vditor自定义图片详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
React Native 中实现倒计时功能
这篇文章主要介绍了React Native中实现倒计时功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
react-redux多个组件数据共享的方法
这篇文章主要介绍了react-redux多个组件数据共享的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-08-08
React路由渲染方式与withRouter高阶组件及自定义导航组件应用详细介绍
这篇文章主要介绍了React路由三种渲染方式、withRouter高阶组件、自定义导航组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-09-09
react实现路由动画跳转功能
这篇文章主要介绍了react路由动画跳转功能,大概思路是下载第三方库引用,创建css文件引用,想要实现跳转动画功能,就在那个组件的根节点绑定classname属性即可,在跳转的时候即可实现,需要的朋友可以参考下
2023-10-10
React中jquery引用的实现方法
这篇文章主要介绍了React中jquery引用的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
React组件的生命周期深入理解分析
组件的生命周期就是React的工作过程，就好比人有生老病死，自然界有日月更替，每个组件在网页中也会有被创建、更新和删除，如同有生命的机体一样
2022-12-12