(
問渠那得清如許丝格，為有源頭活水來。雙手奉上RN官網(wǎng))
ListView : 用于垂直滾動顯示一些可變的但是結(jié)構(gòu)簡單的數(shù)據(jù). 只渲染當(dāng)前的顯示項,沒有顯示的不渲染. 它有兩個重要的屬性dataSource(數(shù)據(jù)源) 和 renderRow(返回單項實際渲染樣式).
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
class ListViewBasics extends Component {
// Initialize the hardcoded data
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','111111111111111',
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','2222222222222222',
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','33333333333333',
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','44444444444444',
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','555555555',
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','666666666666',
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','777777777777',
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
])
};
}
render() {
return (
<View style={{paddingTop: 22,flex:1}}>
<ListView
//數(shù)據(jù)源
dataSource={this.state.dataSource}
// 單行渲染樣式
renderRow={(rowData) => <Text style={{fontSize:26}}>{rowData}</Text>}
/>
</View>
);
}
}
// App registration and rendering
AppRegistry.registerComponent('learnRN', () => ListViewBasics);
