react-native总结

react-native之ListView

react-native当中的列表显示组件非常有用，在开发当中使用的很多，它用于一个垂直的滚动列表，其中的结构相同只是内容不同。ListView更适合用于长列表显示，和其他同种属性组件不同的是ListView在渲染显示的时候优先渲染屏幕可见元素，不可见元素会进行异步加载。

ListView必须的属性和方法：

属性

dataSource

dataSource代表一个数据源对象

renderRow

renderRow能够逐个解析数据源中的数据，然后返回一个设定好格式的组件来渲染。

方法

rowHasChanged

在实际的开发工作当中此方法交给用户自己去实现，以下的例子当中我们只是定义了比较r1和r2是否变化的一个函数，它返回true或者false

官方例子告诉我们如何使用ListView组件，在组件当中也用到了state。

import react,{Component} from 'react';
import {AppRegistry,ListView,Text,View} from 'react-native';

class HelloWorld extends Component{
  constructor(props){
    super(props);
    const ds=new ListView.DataSource({rowHasChanged:(r1,r2)=>r1 !== r2});
    this.state={
      dataSource:ds.cloneWithRows([
          '美国队长1',
          '美国队长2',
          '美国队长3',
          '美国队长4',
          '美国队长5',
          '美国队长6'
      ])
    };
  }
  render(){
    return(
        <View style={padding=22}>          <ListView dataSource={this.state.dataSource}          renderRow={(rowData)=> <Text> {rowData} </Text> }/>        </View>    );  }}
          <ListView dataSource={this.state.dataSource}          renderRow={(rowData)=> <Text> {rowData} </Text> }/>
          renderRow={(rowData)=>
        </View>
    );
  }
}

应用显示效果：