/** * Created by Administrator on 2016/8/30. */@H_404_3@
import@H_404_3@ React,{Component} from 'react'@H_404_3@;
import@H_404_3@ {
AppRegistry,StyleSheet,Text,View,ListView,} from 'react-native'@H_404_3@;
class@H_404_3@ ListViewG@H_404_3@ extends@H_404_3@ Component@H_404_3@ {@H_404_3@
/** * 初始化数据 * @param@H_404_3@ props */@H_404_3@
constructor(props) {
super@H_404_3@(props);
//基本都是些固定写法@H_404_3@
//第一步@H_404_3@
var@H_404_3@ ds = new@H_404_3@ ListView.DataSource({rowHasChanged: ((r1,r2) => r1 !== r2)});
this@H_404_3@.state = {
//数据源@H_404_3@
//第二步@H_404_3@
dataSource: ds.cloneWithRows([
'Android'@H_404_3@,'IOS'@H_404_3@,'React-Native'@H_404_3@,'H5'@H_404_3@,'JAVA'@H_404_3@,'OC'@H_404_3@,'Go'@H_404_3@,'Swift'@H_404_3@,'C'@H_404_3@,'C++'@H_404_3@,'C#'@H_404_3@,'Python'@H_404_3@,'PHP'@H_404_3@
])
}
}
render() {
return@H_404_3@ (
<View style={{paddingTop: 20@H_404_3@,flex: 1@H_404_3@}}>
<ListView
//第三步 设置数据源@H_404_3@
dataSource={this@H_404_3@.state.dataSource}
// 写法一@H_404_3@
// renderRow={(rowData) => <Text style={{height: 150,fontSize: 20}}>测试数据{rowData}</Text>}@H_404_3@
//写法二@H_404_3@
//第四步渲染每行数据也就是对每行数据的布局样式@H_404_3@
renderRow={this@H_404_3@.renderRow}
/>
</View>
)
}
/** * * @param@H_404_3@ rowData 数据源 * @param@H_404_3@ sectionID 组ID * @param@H_404_3@ rowID 行ID * @returns@H_404_3@ {XML} */@H_404_3@
renderRow(rowData,sectionID,rowID) {
return@H_404_3@ (
<Text style={styles.row}>测试数据{rowData + '\n组ID'@H_404_3@ + sectionID + '\n行ID'@H_404_3@ + rowID}
</Text>
)
}
}
const styles = StyleSheet.create({
row: {
height: 80@H_404_3@,fontSize: 20@H_404_3@,//布局优化当写此属性时只会加载屏幕能看到数据@H_404_3@
overflow: 'hidden'@H_404_3@
}
});
module.exports = ListViewG;