import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
ListView
} from 'react-native';
/*
* ListView 数据列表
*
* ListView最重要的是设置每行显示的组件
* section,header
*
* 使用ListView.DataSource, 给他传递一个普通的数据,在使用DataSource对象来实例化一个ListView组件
*
* ListView实现:row/section组件定义,设置数据
*
* 设置ListView数据源: state
* 将dataSource对象设置为state属性
*
* */
//原始数据: 数组(字符串)
var contents = [
"你好,Hello",
"你好,React",
"你好,Thanks"
]
var MyListView = React.createClass({
getInitialState:function () {
//创建dataSource对象
var ds = new ListView.DataSource({
//通过判断决定渲染哪些 行组件, 避免全部渲染,提高效率
rowHasChanged:(oldRow,newRow) => oldRow!==newRow
});
return{
//设置dataSource时,不直接使用提供的原始数据,使用cloneWithRows对数据源进行复制
//使用复制后的数据源实例化ListView,好处:当原始数据发生变化,ListView组件的dataSource不会改变
dataSource: ds.cloneWithRows(contents)//原始数据
};
},
//实现renderRow方法(相当于cell)
//渲染row组件,参数:每行要显示的数据对象
_renderRow:function (rowData) {
return(
<View style={styles.row}>
<Text style={styles.content}>{rowData}</Text>
</View>
)
},
render:function () {
return(
<ListView
style={styes.listView}
dataSource={this.state.dataSource}
renderRow={this._renderRow}
/>
);
}
});
var styles = StyleSheet.create({
listView:{
flex:1,
marginTop:25
},
row:{
justifyContent:"center",
alignItems:"center",
padding:5,
height:100,
borderBottomWidth:1,
borderColor:"#CCCCCC"
},
content:{
flex:1,
fontSize:20,
color:"blue",
lineHeight:100
}
});