如何为scrollView添加ActivityIndi​​cator？

Question

I am trying to add ActivityIndicator in ScrollView to display 20 items. and after loading it will show more 20 items.

In below code ActivityIndicator is showing at the end of the scrollView but i need it after 20 items.

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;

Answer 1

As I can see you need to show loading once user scroll to last. For this FlatList seems the best component apart from ScrollView . ListFooterComponent prop will be invoked automatically when list is scrolled to last. So Refactor your code as below :

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;