ReactNative實戰 (三) FlatList 上下拉重新整理的使用
阿新 • • 發佈:2019-01-27
先看看效果圖
寫在前面
因為下面介面 是http 協議的。 蘋果會報錯
所以需要 根據下面博文 修改一下
http://blog.csdn.net/u011439689/article/details/62046799
App Transport Security Settings 加入
Allow Arbitrary Loads = YES
官方文件
常用
<FlatList
style={styles.container}
data={this.state.data}
//item顯示的佈局
renderItem={({item}) => this._createListItem(item)}
// 空佈局
ListEmptyComponent={this._createEmptyView}
//新增頭尾佈局
ListHeaderComponent={this._createListHeader}
ListFooterComponent={this._createListFooter}
//下拉重新整理相關
onRefresh={() => this._onRefresh()}
refreshing={this.state.isRefresh}
//載入更多
onEndReached={() => this._onLoadMore()}
onEndReachedThreshold={0.1}
/>
Demo的介面
使用360的介面 如有侵權 聯絡本人刪除
返回的資料結構
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity, FlatList, Image,
} from 'react-native';
import {Card} from "react-native-elements" ;
//螢幕資訊
const dimensions = require('Dimensions');
//獲取螢幕的寬度和高度
const {width, height} = dimensions.get('window');
export default class HomeView extends Component {
static navigationOptions = () => ({
header: null,
}
);
constructor(props){
super(props);
//當前頁
this.page = 1
//狀態
this.state = {
// 列表資料結構
data:[],
// 下拉重新整理
isRefresh:false,
// 載入更多
isLoadMore:false
}
}
render() {
return (
<FlatList
style={styles.container}
data={this.state.data}
//item顯示的佈局
renderItem={({item}) => this._createListItem(item)}
// 空佈局
ListEmptyComponent={this._createEmptyView}
//新增頭尾佈局
ListHeaderComponent={this._createListHeader}
ListFooterComponent={this._createListFooter}
//下拉重新整理相關
onRefresh={() => this._onRefresh()}
refreshing={this.state.isRefresh}
//載入更多
onEndReached={() => this._onLoadMore()}
onEndReachedThreshold={0.1}
/>
);
}
/**
* 建立頭部佈局
*/
_createListHeader(){
return (
<View style={styles.headView}>
<Text style={{color:'white'}}>
頭部佈局
</Text>
</View>
)
}
/**
* 建立頭部佈局
*/
_createListFooter(){
return (
<View style={styles.footerView}>
<Text style={{color:'white'}}>
底部底部
</Text>
</View>
)
}
/**
* 建立佈局
*/
_createListItem(item){
return (
<TouchableOpacity activeOpacity={0.5} onPress={() => this._onItemClick(item)}>
<Card>
<Image source={{uri:item.logo_url}} style={styles.itemImages}/>
<Text>
{item.baike_name}
</Text>
</Card>
</TouchableOpacity>
);
}
/**
* 空佈局
*/
_createEmptyView(){
return (
<View style={{height:'100%', alignItems:'center', justifyContent:'center'}}>
<Text style={{fontSize:16}}>
暫無列表資料,下啦重新整理
</Text>
</View>
);
}
/**
* 獲取360 下載列表
* @private
*/
_getHotList() {
fetch("http://m.app.haosou.com/index/getData?type=1&page=" + this.page)
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson)
if(this.page === 1){
console.log("重新載入")
this.setState({
data: responseJson.list
})
}else{
console.log("載入更多")
this.setState({
// 載入更多 這個變數不重新整理
isLoadMore : false,
// 資料來源重新整理 add
data: this.state.data.concat(responseJson.list)
})
}
})
.catch((error) => {
console.error(error);
});
}
/**
* 下啦重新整理
* @private
*/
_onRefresh=()=>{
// 不處於 下拉重新整理
if(!this.state.isRefresh){
this.page = 1
this._getHotList()
}
};
/**
* 載入更多
* @private
*/
_onLoadMore(){
// 不處於正在載入更多 && 有下拉重新整理過,因為沒資料的時候 會觸發載入
if (!this.state.isLoadMore && this.state.data.length > 0){
this.page = this.page + 1
this._getHotList()
}
}
/**
* item點選事件
*/
_onItemClick(item){
console.log("page" + this.state.page + " = " + item.baike_name)
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
},
headView:{
width:width,
height:100,
backgroundColor:'red',
justifyContent:'center',
alignItems:'center'
},
footerView:{
width:width,
height:100,
backgroundColor:'yellow',
justifyContent:'center',
alignItems:'center'
},
itemImages:{
width:120,
height:120,
resizeMode:'stretch'
},
});