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 (
            <ListView dataSource={this.state.ds}
                      renderRow={this._renderRow.bind(this)}
                      style={{marginTop:20,backgroundColor:'red'}}
                      renderHeader={this._renderHeader.bind(this)}
                      renderFooter={this._renderFooter.bind(this)}
                      onScroll={(e)=>{
                          console.log(e.nativeEvent);
                      }}
            />
        )
}

    _renderHeader(){
        return ( <View style={{backgroundColor:'blue',height:300}}></View>)
    }
    _renderFooter(){
        return (<View style={{backgroundColor:'yellow',height:200}}></View>)
    }
    // 渲染分割线
    _renderSeparator(){
        return (
            <View style={{height:1,backgroundColor:'#e8e8e8'}}>
            </View>
        )
    }
    // 返回每一行的外观
    _renderRow(rowData,sectionID,rowID,highlightRow){
        return (
            <TouchableOpacity>
                <View style={{
                    height:44,
                    justifyContent:'center',
                    backgroundColor:'green',
                    borderBottomWidth:1,
                    borderBottomColor:'#e8e8e8'
                }} onPress={()=>{
                highlightRow(sectionID,rowID);
                }}>
                    <Text>{rowData}</Text>
                </View>
            </TouchableOpacity>
        )
    }
}
var styles = StyleSheet.create({
})
AppRegistry.registerComponent('ReactDemo',()=>ReactDemo);