1. 折腾了两三个小时才出来一个界面,先上坑
2. 代码如下
export default class App extends Component {
render() {
var data = [];
for (var i = 0; i < 5; i++) {
data.push({key: i, title: i + ''});
}
return (
<View style={{flex:1}}>
<FlatList
//头部视图
ListHeaderComponent={this._header}
//尾部
ListFooterComponent={this._footer}
//每一行都有分割线
ItemSeparatorComponent={this._separator}
//写法二:renderItem={(item)=>{return <Text >123</Text>}}
renderItem= {this.renderItem}
//这个key 必填
keyExtractor= {(item, index) => index + item}
data={data}
>
</FlatList>
</View>
)
}
renderItem = (item) => {
var txt = '第' + item.index + '个' + ' title=' + item.item.title;
var bgColor = item.index % 2 == 0 ? 'red' : 'blue';
//没有return的话不显示。中文官网没有return
return <Text style={[{flex:1,height:100,backgroundColor:bgColor},styles.txt]}>{txt}</Text>
}
_header = () => {
return <Text style={[styles.txt,{backgroundColor:'green'}]}> 这是头部 </Text>;
}
_footer = () => {
return <Text style={[styles.txt,{backgroundColor:'black'}]} >这是尾部</Text>;
}
_separator = () => {
return <View style={{height:4,backgroundColor:'yellow'}}/>;
}
}
const styles = StyleSheet.create({
txt: {
textAlign: 'center',
textAlignVertical: 'center',
color: 'white',
fontSize: 30,
}
});