React Native开发之——组件ListView

前言

ListView是React Native中渲染大量数据的组件，ListView是日常开发最常用的控件之一，会话列表（微信），商品列表（淘宝），问题列表（汽车大师）等等各种列表均用到了ListView。这篇文章简单介绍下ListView的入门。

ListView

概念

使用ListView必须熟悉以下几个属性

• dataSource
• renderRow
• rowHasChanged

dataSource和renderRow

ListView组件必须的两个属性是dataSource和renderRow。dataSource是列表的数据源，而renderRow则逐个解析数据源中的数据，然后返回一个设定好格式的组件来渲染。

rowHasChanged

rowHasChanged函数也是ListView的必需属性。这里我们只是简单的比较两行数据是否是同一个数据（===符号只比较基本类型数据的值，和引用类型的地址）来判断某行数据是否变化了。

实例

export default class App extends Component 
{
    constructor(props) 
    {
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
        dataSource: ds.cloneWithRows([
            {"title": "hzw", "img": "hzw"},
            {"title": "xiaoxin", "img": "xiaoxin"},
            {"title": "hzw", "img": "hzw"},
            {"title": "xiaoxin", "img": "xiaoxin"},
            {"title": "hzw", "img": "hzw"},
            {"title": "xiaoxin", "img": "xiaoxin"},
            {"title": "hzw", "img": "hzw"},
            {"title": "xiaoxin", "img": "xiaoxin"},
            {"title": "hzw", "img": "hzw"},
            {"title": "xiaoxin", "img": "xiaoxin"},
            {"title": "hzw", "img": "hzw"},
            {"title": "xiaoxin", "img": "xiaoxin"},
            {"title": "hzw", "img": "hzw"},
            {"title": "xiaoxin", "img": "xiaoxin"}]),
            };
    }

    render() 
    {
        return (
        
            
        
    );
    }

// 返回一个Item
renderRow(rowData) 
    {
        return (
        alert(rowData.title)} activeOpacity={0.3} underlayColor={'#ccc'}>
            
                
                
                    {rowData.title}
                    简介
                
            
        
        );

    }
}

效果图

其他

参考:Github下载地址