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 初始渲染的行數
  截圖：
  
  

源碼