React-native基础控件之ListView

ListView至少需要两个属性才能构建 dataSource(数据源)，renderRow(cell行显示)和renderSeparator(分割线显示)

ListView属性列表

dataSource:数据源
renderRow：cell行显示
renderSeparator：分割线显示
renderFooter：ListView头部显示
renderHeader：ListView底部部显示
renderSectionHeader：分组头部显示(ListView没有分组底部显示)

DataSource(数据源)相关方法列表

创建
new ListView.DataSource()
方法
rowHasChanged：行渲染规则[创建数据源时必须提供方法实现否则报错]
sectionHeaderHasChanged：分组头部渲染规则[如果需要分组创建数据源的时候此方法也是必须实现的方法]
cloneWithRows：普通列表添加数据
cloneWithRowsAndSections：分组列表添加数据

构建ListView

构建数ListView两步即可

1、构建数据源

1)创建数据源

//创建数据源时必须提供rowHasChanged的方法实现
var dataSource = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2});

2)给数据源添加真实数据

//准备好的真实数据使用
//这里的真实数据可以是js对象
var realData = ["测试1",测试1","测试1"];
//如果是有分组的cloneWithRowsAndSections
var data = dataSource.cloneWithRows(realData);

2、渲染子部件

//分割线的key属性
var separatorKey = 0;

//渲染cell方法
_renderRow(rowData)
{
     return(
        <View style={{height:44,justifyContent:'center'}}>
             <Text>{rowData}</Text>
        </View>);
}

//渲染分割线
_renderSeparator()
{
     return(<View key={separatorKey++} style={{backgroudColor:"#6666",height:0.5}} />);
}
render()
{
     return(
         <ListView
               dataSource = {data}
               renderRow = {(rowData) => this._renderRow(rowData)}
               renderSeparator = {() => this._renderSeparator()}
        />
    );
}

建议将数据的构造添加到控件的构造方法中

//这里将数据展示扩展到分组

// 构造
      constructor(props) {
        super(props);
        // 初始状态
        var realData = [["测试1","测试11","测试111"],    ["测试2","测试22","测试222"],["测试3","测试33","测试333"]]; 
         var dataSource = new ListView.DataSource({
rowHasChanged:(r1,r2) => r1 !== r2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2});
        this.state = {
            data : dataSource.cloneWithRowsAndSections(realData)
       }; 
     }
    //渲染cell方法 
   _renderRow(rowData) 
   { 
       return(
            <View style={{height:44,justifyContent:'center'}}>                <Text>{rowData}</Text>
            </View>);
    }
//渲染分割线
    _renderSeparator()
    {
        return(<View key={separatorKey++} style={{backgroundColor:"#6666",height:0.5}} />); 
   } 
_renderSectionHeader(data,sectionID){    return<View style={{height:44,backgroundColor:'red'}}>        <Text>{sectionID}</Text>    </View>}
   render() 
   {
        return(
            <ListView
                dataSource = {this.state.data}
                renderRow = {(rowData) => this._renderRow(rowData)} 
               renderSeparator = {() => this._renderSeparator()} 
               renderSectionHeader={(data,sectionID) => this._renderSectionHeader(data,sectionID)}
           />
        );
    }

监听ListView的滚动

方法
onscroll(event)：event滚动事件，event.nativeEvent.contentOffset(iOS专用)，滚动事件的监听需要设置一个阀值，用于告知系统在滚动到什么程度才能触发滚动事件，如果没有设置，将不能触发滚动scrollEventThrottle

注意：

1、ListView的renderRow警告需要key，设置renderRow中的component的key属性是没用的，需要设置renderSeparator中的component的key属性。同样的往一个Array中push多个component，需要每个component都有key属性且不可重复。

2、创建数据源时必须提供rowHasChanged的方法实现
3、如果需要分组创建数据源的时候sectionHeaderHasChanged也是必须实现的方法
4、rowHasChanged和sectionHeaderHasChanged的sectionID和rowID都是可以省略的，默认的rowID是从0开始到一次递加的整数，同样的如果分组默认的sectionID也是从0开始一次递加的整数。
5、建议在使用分组的时候构造数据源，真实数据直接使用二维数组，不分组使用以为数组