目前新版的react native已经都用FlatList代替了ListView。所以有必要学习下FlatList都具体用法。官方中文网描述如下:
高性能的简单列表组件,支持下面这些常用的功能:
- 完全跨平台。
- 支持水平布局模式。
- 行组件显示或隐藏时可配置回调事件。
- 支持单独的头部组件。
- 支持单独的尾部组件。
- 支持自定义行间分隔线。
- 支持下拉刷新。
- 支持上拉加载。
- 支持跳转到指定行(ScrollToIndex)。
- 支持多列布局
实现代码如下:
import React, { Component } from 'react';
import {
AppRegistry,
FlatList,
View,
Button,
Image,
StyleSheet,
Text,
TouchableOpacity,
Dimensions,
Alert
} from 'react-native';
class myapp extends React.PureComponent {
_flatList;
constructor(props) {
super(props);
this.state = {
refer: false,
}
}
footView = () => {
return (
<View style={
{flex: 1, flexDirection:'row',justifyContent: 'center',backgroundColor: '#a1f11a',alignItems: 'center',height:44}}>
<Text>加载完毕</Text>
</View>
)
};
renderItemView = (item) => {
return (
<View style={styles.item_view}>
<View>
<Image
style={styles.item_view_img}
source={
{uri: 'https://img-blog.csdnimg.cn/20190323161354536.png'}}/>
</View>
<View style={styles.item_text_view}>
<Text style={styles.item_view_text}>{item.title}</Text>
<Text style={styles.item_view_text} numberOfLines={10} >{item.content}</Text>
</View>
</View>
)
};
separatorView = () => {
return (
<View style={
{flex: 1, backgroundColor: '#ff0000', height: 1}}>
</View>
)
};
onRefresh = () => {
this.setState({
refer: true,
});
this.timer = setTimeout(
()=>{
console.log('刷新结束');
this.setState({
refer: false,
});
},
2000
);
};
componentWillUnmount() {
clearTimeout(this.timer)
}
render() {
var data = [];
for (var i=0; i<15; i++) {
data[i] = {key:i,title:'新闻标题'+i,content:'11111111111111111111新闻内容新闻内新闻闻内新闻1111速度速度速度达到速度速度速度颠三倒四内'+i}
}
return(
<View style={
{backgroundColor: '#ffaaff', flex: 1, justifyContent: 'center'}}>
<FlatList ref={(flatList)=>this._flatList = flatList} style={
{backgroundColor: '#fff', flex: 1, marginTop: 44}}
data={data}
renderItem={({item}) => this.renderItemView(item)}
ListFooterComponent = {this.footView}
ItemSeparatorComponent = {this.separatorView}
onViewableItemsChanged={(info)=>{
console.log(info);
}}
refreshing = {this.state.refer}
onRefresh={this.onRefresh}
onEndReachedThreshold={0.0000001}
onEndReached={(info) => {
Alert.alert('加载完毕');
} }
/>
</View>
)
}
}
const styles = StyleSheet.create({
item_view: {
width: Dimensions.get('window').width,
flex: 1,
flexDirection:'row',
alignItems: 'center',
height: 80,
},
item_view_img:{
marginLeft: 10,
width: 60,
height: 60
},
item_text_view:{
marginLeft: 20
},
item_view_text:{
paddingRight: 70
}
});
export default myapp;