ReactNative-ListView(十)

此组件已过期 - 请使用FlatList或SectionList代替。

一、ListView原理

• ListView内部是通过DataSource对象显示数据，因此使用ListView要先创建DataSource对象
• highlightRow:高亮函数。函数需要传入两个参数,组ID,行ID

二、使用ListView步骤

1.创建数据源对象 new ListView.DataSource()
2.设置数据 cloneWithRow []
3.实现渲染每一行方法 renderRow

代码示例：

import React, {Component} from 'react'
import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Button,
    TextInput,
    Image,
    Dimensions,
    ListView
}
    from 'react-native'

class ReactDemo extends Component {
    constructor(props){
        super(props);
        // 创建数据源
        ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

        // 设置数据
        ds = ds.cloneWithRows(['row1','row2']);
        this.state = {
            ds:ds
        }
    }

    render(){
        return (
            {
                          console.log(e.nativeEvent);
                      }}
            />
        )
}

    _renderHeader(){
        return ( )
    }
    _renderFooter(){
        return ()
    }
    // 渲染分割线
    _renderSeparator(){
        return (
            
            
        )
    }
    // 返回每一行的外观
    _renderRow(rowData,sectionID,rowID,highlightRow){
        return (
            
                {
                highlightRow(sectionID,rowID);
                }}>
                    {rowData}
                
            
        )
    }
}
var styles = StyleSheet.create({
})
AppRegistry.registerComponent('ReactDemo',()=>ReactDemo);