返回首页 | 注册送体验金88送现金

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

网站开发ReactNative列表ListView的用法

时间:2017-08-24 编辑:admin

最近在学习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,回来一个可烘托的组件来为这行数据进行烘托,默许情况下参数中的数据就是放进数据源中的数据自身,不过也能够供给一些转换器。

如果某一行正在被高亮,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()),


浏览:

网站建设

流程

    网站建设流程