此博客基于react-native-0.49.3
之前我们已经说过ListView这个控件了、FlatList性质也是一样的只不过使用起来更加封闭、内部封装好了 添加头尾布局、下拉刷新、上拉加载等功能…
实现的效果：
FlatList实现一个最简单的列表
<FlatList
//数据源
data={[{key: 'a'}, {key: 'b'}]}
//渲染每一个Item
renderItem={({item}) => <Text>{item.key}</Text>}
/>来实现一个见的最多的列表，从网络获取数据、解析并展示出来。
- 定义好数据源用来存储加载的网络数据
static defaultProps = {
url: 'https://news-at.zhihu.com/api/4/news/latest'
};
constructor(props) {
super(props);
this.state = {
data: [],//存储列表使用的数据
refreshing: false,//当前的刷新状态
};
}- 渲染FlatList组件
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.data}
keyExtractor={this.keyExtractor}
renderItem={this.getView}
//添加头尾布局
ListHeaderComponent={this.header}
ListFooterComponent={this.footer}
//下拉刷新，必须设置refreshing状态
onRefresh={this.onRefresh}
refreshing={this.state.refreshing}
/>
</View>
);
}添加头尾布局使用ListHeaderComponent、ListFooterComponent 数据即可，关于FlatList组件更多的属性和方法可以参考官方文档
//头尾布局都是一样，这里就只贴出一个头布局以供参考
header = () => {
return (
<Text style={{
backgroundColor: '#4398ff',
color: 'white',
fontSize: 18,
textAlign: 'center',
textAlignVertical: 'center',
height: 150,
}}>我是头布局</Text>
)
};请求网络数据加载列表数据
//渲染完成，请求网络数据
componentDidMount() {
fetch(this.props.url)
.then((response) => response.json())
.then((response) => {
//解析json数据
var json = response['stories'];
//更新状态机
this.setState({
data: json,
});
})
.catch((error) => {
if (error) {
//网络错误处理
console.log('error', error);
}
});
}Item的布局这里就不贴出来了，可以前往文末的源码地址查看。
接下来就是对列表进行刷新操作。
下拉刷新，必须设置refreshing状态
onRefresh={this.onRefresh}
refreshing={this.state.refreshing}
当正在刷新的时候将refreshing=true这样在顶部就可以看到一个刷新的圆圈效果
/**
* 下拉属性
*/
onRefresh = () => {
//设置刷新状态为正在刷新
this.setState({
refreshing: true,
});
//延时加载
const timer = setTimeout(() => {
clearTimeout(timer);
//往数组的第一位插入数据，模拟数据新增 , unshift()会返回数组的长度
this.state.data.unshift(new this.ItemData('https://pic2.zhimg.com/v2-8f11b41f995ca5340510c1def1c003d1.jpg',
'下拉刷新添加的数据——————' + this.count, 475843));
this.count++;
this.setState({
refreshing: false,
});
}, 1500);
};ItemData也就是每条数据的数据格式，这样往我们创建好的·data·数组中添加数据才是符合的。
/**
* json 数据实体类
*/
ItemData(images, title, id) {
this.images = new Array(images);
this.title = title;
this.id = id;
}上拉加载：我这里配置下面两个属性的时候一直出不来效果不知道为什么,有会的大佬欢迎留言或者贴个源码地址，在此感谢大家了。
onEndReachedThreshold={0}
onEndReached={this.onEndReached}