在拉动刷新列表或什至滚动视图的同时，我从api中获取了一些数据，如果获取的数据较少，那么我已经显示的数据就消失了，如果更高，它只会显示新的内容，如果相等，一切似乎都还好，如果我转到其他页面，那么我返回的一切似乎都很好 注意：我会显示我使用本机库中的卡片项目从api获取的图像列表
_getFilesOnRefresh = () => {
axios.get(GET_ALL_FILES_URL+this.state.company_id, {
headers: {
'api_token':this.state.api_token
}
})
.then(resp =>{
this.state.files = resp.data[0];
//set the cache to the new data
this._setCache(resp.data[0]);
this._AppendUploadingFiles();
if(this.state.files.data.length == 0)
{
this.setLoading(true);
let message = "You Don\'t Have Any Files";
alert_message(message);
this._middlePageMessage(message);
}
else
{
this.setLoading(false);
// this.state.files.data = this.state.files.data.reverse();
success_message("Displayed "+this.state.files.data.length+" Files");
}
// stop refreshing
this.setRefresh(false);
})
.catch(function(error){
console.log('on refresh error',error);
// console.log(error)
let message = 'Check Your Connection!';
// this.setLoading(true);
alert_message(message);
// this._middlePageMessage(message);
// stop refreshing
this.setRefresh(false);
}.bind(this)); };
_handleRefresh = () => {
if(!_getUploadingFlag()){// if he's uploading don't do anything else refresh
this.setRefresh(true);
this._getFilesOnRefresh();
}
};
render() {
if(this.state.isLoading){
return(
<Container style={styles.container}>
<MenuHeader title="My Requests" obj={this.props}/>
{this.state.LoadingOutput}
<FabAddFiles currentPage={this}/>
</Container>
);
}
else{
for (let index = 0; index < this.state.files.data.length; index++) {
if(this.state.files.data[index].file_status == 'pending' || this.state.files.data[index].file_status == 'in-progress')
this.state.files.data[index].type = fileStatus['pending'];
else if(this.state.files.data[index].type == 'Sales'){
this.state.files.data[index].type = <Icon ACTIVE name="document" style={{color:colors.success_color,fontSize:45}}/>;
}else if(this.state.files.data[index].type == 'Purchase'){
this.state.files.data[index].type = <Icon type="FontAwesome" name="shopping-cart" style={{color:colors.danger_color,fontSize:40}}/>;
}
if(this.state.files.data[index].images.length == 0){
//create image path if it's not exist
let imagePath = {image_path:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRvcJY57vM025nSOBjfKbo6pC0pMIMMHEdDcJZprWFigxXCIqhRVA'};
this.state.files.data[index].images.push(imagePath);
}
}
// create list
let files_elemnts = this.state.files.data.map(item => {
return(
<TouchableHighlight onPress={() => this.props.navigation.navigate('ShowFile' , {item:item})}>
<Content style={styles.File_box} >
<Card style={styles.card} >
<CardItem style={styles.card_item}>
<Left style={{flex:1,borderRadius:15}}>
<Image
// resizeMethod={'resize'}
source={{uri: item.images[0].image_path}}
indicator={ProgressPie}
// renderError={console.log('error')}
indicatorProps={{
size: 80,
color: colors.secondary_color,
unfilledColor: colors.third_color
}}
style={{
width: 100,
height: 120,
}}
borderRadius={10}
/>
</Left>
<Body style={{flex:1.4}}>
<Text style={styles.file_status}>{item.description.length > 0 ? item.description : headerStatus[item.file_status]}</Text>
<Text note style={styles.date}>
<Icon active name="calendar" style={styles.icon}/> {item.date}
</Text>
<Text note style={styles.time}><Icon active name="time" style={styles.icon}/> {item.time}</Text>
{item.amount !=0 ? <Text style={styles.money}>AED {item.amount}</Text> :null}
</Body>
<Right style={{flex:0.4}}>
{item.type}
<Text style={styles.mainIcon}></Text>
{item.file_status == 'in-progress' || item.file_status == 'pending' ? null :fileStatus[item.file_status] }
</Right>
</CardItem>
</Card>
</Content>
</TouchableHighlight>
)
});
return (
<Container style={styles.container}>
<MenuHeader title="My Requests" obj={this.props}/>
{/*<View style={{flex:0.1}}>*/}
{/*/!*<Text style={styles.headeing}>{this.state.company_name}</Text>*!/*/}
{/*</View>*/}
<ScrollView refreshControl={
<RefreshControl
refreshing={this.state.refresh}
onRefresh={this._handleRefresh}
/>
}>
<View style={{flex:1}}>
{files_elemnts}
</View>
</ScrollView>
<FabAddFiles currentPage={this}/>
</Container>); }
以防我使用平面列表
<FlatList
style={{marginBottom:20}}
onRefresh={this._handleRefresh}
refreshing={this.state.refresh}
initialNumToRender={30}
extraData={this.state.reRender}
data={this.state.files.data}
keyExtractor={item => item.id}
renderItem={({item}) =>
<TouchableHighlight onPress={() => this.props.navigation.navigate('ShowFile' , {item:item})}>
<Content style={styles.File_box} >
<Card style={styles.card} >
<CardItem style={styles.card_item}>
<Left style={{flex:1,borderRadius:15}}>
<Image
// resizeMethod={'resize'}
source={{uri: item.images[0].image_path}}
indicator={ProgressPie}
// renderError={console.log('error')}
indicatorProps={{
size: 80,
color: colors.secondary_color,
unfilledColor: colors.third_color
}}
style={{
width: 100,
height: 120,
}}
borderRadius={10}
/>
</Left>
<Body style={{flex:1.4}}>
<Text style={styles.file_status}>{item.description.length > 0 ? item.description : headerStatus[item.file_status]}</Text>
<Text note style={styles.date}>
<Icon active name="calendar" style={styles.icon}/> {item.date}
</Text>
<Text note style={styles.time}><Icon active name="time" style={styles.icon}/> {item.time}</Text>
{item.amount !==0 ? <Text style={styles.money}>AED {item.amount}</Text> :null}
</Body>
<Right style={{flex:0.4}}>
{item.type}
<Text style={styles.mainIcon}></Text>
{item.file_status == 'in-progress' || item.file_status == 'pending' ? null :fileStatus[item.file_status] }
</Right>
</CardItem>
</Card>
</Content>
</TouchableHighlight>}
/>