[英]How to add ActivityIndicator for scrollView?
我试图在ScrollView中添加ActivityIndicator以显示20个项目。 加载后将显示更多20个项目。
在下面的代码中,ActivityIndicator显示在scrollView的末尾,但我需要在20个项目之后使用。
import React, { Component } from 'react';
import { View, ScrollView, Alert, ActivityIndicator } from 'react-native';
import AlbumDetail from './AlbumDetail';
import axios from 'axios';
class AlbumList extends Component {
state = {
isLoading: false,
albums: [],
};
componentWillMount() {
axios
.get('http://www.json-generator.com/api/json/get/cqgdfqryzS?indent=2')
.then(response => this.setState({ albums: response.data }));
}
componentDidMount() {
{this.setState({ isLoading: false })}
}
renderAlbums() {
return this.state.albums.map(album => (
<AlbumDetail key={album.name} album={album} />
));
}
render() {
return (
<ScrollView>
{this.renderAlbums()}
<ActivityIndicator size="large" color="#0000ff" />
</ScrollView>
);
}
}
export default AlbumList;
如我所见,一旦用户滚动到最后,您需要显示加载。 为此,除了ScrollView
之外, FlatList
似乎是最好的组件。 当列表滚动到最后时, ListFooterComponent
将自动被调用。 因此,如下重构您的代码:
import React, { Component } from 'react';
import { View, FlatList, Alert, ActivityIndicator } from 'react-native';
import AlbumDetail from './AlbumDetail';
import axios from 'axios';
class AlbumList extends Component {
state = {
isLoading: false,
albums: [],
};
componentWillMount() {
axios
.get('http://www.json-generator.com/api/json/get/cqgdfqryzS?indent=2')
.then(response => this.setState({ albums: response.data }));
}
componentDidMount() {
{this.setState({ isLoading: false })}
}
Render_Footer=()=>{
return (
<ActivityIndicator size="large" color="#0000ff" />
)
}
render() {
return (
<FlatList
keyExtractor = {( item, index ) => index }
data = { this.state.albums}
renderItem = {({ item }) => <AlbumDetail key={item.name} album={item } />}
ListFooterComponent = { this.Render_Footer }
/>
);
}
}
export default AlbumList;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.