react-native listview使用

listview是我们应用中的一个重要组件，用它我们可以展示列表数据。react-native为我们提供了ListView组件，方便我们实现列表数据展示。

1.引入ListView组件：

import {
    StyleSheet,
    ListView,
    View,
    Text,
    Image
}from 'react-native';

2.构造函数中初始化ListView的数据源：

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

rowHasChanged方法会告诉ListView是否需要重新渲染当前一行。
3.将ListView加入到render()中

<ListView
                    dataSource={this.state.dataSource.cloneWithRows(this.props.dynamicList.dynamicList)}
                    renderRow={(rowData,sectionId,rowId)=>{return this._renderRow(rowData,sectionId,rowId)}}
                    renderHeader={()=>{return this._renderHeader()}}
                    showsVerticalScrollIndicator={false}
                    enableEmptySections={true}
                    initialListSize={10}
                />

• dataSource 设置ListView的数据源
• renderHeader 渲染ListView的头部

_renderHeader() {
        return (
            <View style={{flex:1,marginBottom:10}}>
                <Search/>
                <View style={{flex:1,backgroundColor:'white'}}>
                    <View style={{flex:1,height:1,backgroundColor:"#e4e4e4"}}/>
                    <View
                        style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingLeft:10,paddingRight:10,paddingTop:10,paddingBottom:10,}}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Image source={require('./../../res/icon_hotnews.png')} style={{width:16,height:19}}/>
                            <Text style={{color:'#080808',fontSize:14,marginLeft:5}}>热点资讯</Text>
                        </View>
                        <Image source={require('./../../res/arrow_right.png')} style={{width:8,height:16}}/>
                    </View>
                    <View style={{flex:1,height:1,backgroundColor:"#e4e4e4"}}/>
                    <View
                        style={{flex:1,flexDirection:'row',alignItems:'center',paddingLeft:15,paddingRight:10,paddingTop:5}}>
                        <Image source={require('./../../res/newspoint.png')} style={{width:5,height:5,}}/>
                        <Text style={{color:'#8f9499',fontSize:13,marginLeft:5,overflow:'hidden'}} numberOfLines={1}>香港将迎首位女特首：出身贫寒
                            曾批“占中”乱港</Text>
                    </View>
                    <View style={{flex:1,flexDirection:'row',alignItems:'center',paddingLeft:15,paddingRight:10,paddingTop:5,}}>
                        <Image source={require('./../../res/newspoint.png')} style={{width:5,height:5,}}/>
                        <Text style={{color:'#8f9499',fontSize:13,marginLeft:5,overflow:'hidden'}} numberOfLines={1}>香港将迎首位女特首：出身贫寒 曾批“占中”乱港</Text>
                    </View>
                    <View style={{flex:1,flexDirection:'row',alignItems:'center',paddingLeft:15,paddingRight:10,paddingTop:5,paddingBottom:10}}>
                        <Image source={require('./../../res/newspoint.png')} style={{width:5,height:5,}}/>
                        <Text style={{color:'#8f9499',fontSize:13,marginLeft:5,overflow:'hidden'}} numberOfLines={1}>香港将迎首位女特首：出身贫寒 曾批“占中”乱港</Text>
                    </View>
                    <View style={{flex:1,height:1,backgroundColor:"#e4e4e4",}}/>
                </View>
            </View>
        )
    }

renderFooter 渲染ListView的底部，与renderHeader用法一致。

• renderRow 渲染ListView的每一行item，传入当前行的数据源，当前行的组号，及当前行的行号三个参数

_renderRow(rowData, sectionId, rowId) {
        if (rowId % 3 == 0) {
            return (
                <View style={styles.row}>
                    <ItemHeader/>
                    <View style={{flex:1,paddingLeft:10,paddingRight:10,}}>
                        <Text style={styles.detailText}>分享了一张名片</Text>
                        <View style={styles.link}>
                            <Image source={require('./../../res/header_default.png')} style={styles.userAvator}/>
                            <Text style={styles.linkTitle}>陈蓉的同城号名片</Text>
                        </View>
                        <Text style={styles.timeText}>9天前</Text>
                    </View>
                    <ItemFooter/>
                </View>
            )
        } else if (rowId % 3 == 1) {
            return (
                <View style={styles.row}>
                    <ItemHeader/>
                    <View style={{flex:1,paddingLeft:10,paddingRight:10}}>
                        <Text
                            style={styles.detailText}>人的虚妄幻想欲求逃避麻木软弱怪异愤怒堕落，如鬼魅一般穿梭，而无法走出来的人，就会陷入自己的心魔所制造的迷宫，徘徊不得出。</Text>
                        <Text style={styles.timeText}>9天前</Text>
                    </View>
                    <ItemFooter/>
                </View>
            )
        } else {
            return (
                <View style={styles.row}>
                    <ItemHeader/>
                    <View style={{flex:1,paddingLeft:10,paddingRight:10}}>
                        <Text style={styles.detailText}>尽管我们被城市的钢筋丛林所束缚，但有空时不妨翻开书卷，通过地理学，去看看那绚丽缤纷的花花世界。</Text>
                        <View style={styles.imgs}>
                            <Image source={require('./../../res/girl.jpg')} style={styles.img}/>
                            <Image source={require('./../../res/girl.jpg')} style={styles.img}/>
                            <Image source={require('./../../res/girl.jpg')} style={styles.img}/>
                            <Image source={require('./../../res/girl.jpg')} style={styles.img}/>
                            <Image source={require('./../../res/girl.jpg')} style={styles.img}/>
                            <Image source={require('./../../res/girl.jpg')} style={styles.img}/>
                            <Image source={require('./../../res/girl.jpg')} style={styles.img}/>
                            <Image source={require('./../../res/girl.jpg')} style={styles.img}/>
                            <Image source={require('./../../res/girl.jpg')} style={styles.img}/>
                        </View>
                        <Text style={styles.timeText}>9天前</Text>
                    </View>
                    <ItemFooter/>
                </View>
            )
        }
    }

• initialListSize 初始渲染的行数
  截图：
  
  

源码