Показать индикатор активности в конце ListView in React-Native

Question

Ищете способ добавления индикатора активности в конец ListView, когда пользователь достиг цели, и приложение запрашивает больше данных с сервера , Я могу добавить индикатор после ListView, но потом он всегда появляется.

Answer 1

Вы должны быть в состоянии добиться этого, используя опору onEndReached для A ListView. Когда вы достигнете конца, вы можете отобразить загрузчик. В моем случае я использовал renderFooter для рендеринга загрузчика в нижней части списка. В моем сценарии

Вы можете установить в состоянии компонента атрибут с именем messagesLoading, который вы установили в значение true, когда вы начинаете получать новые данные и false, когда это делается. Исходя из этого, вы можете отображать или не показывать индикатор загрузки в нижнем колонтитуле.

Этот пример частичная реализация должна дать вам представление о том, как вы можете это сделать:

class ThreadDetail extends React.Component { 

    constructor() { 
     super() 
     this.state = { 
      loading: false 
     } 
    } 

    loadMoreMessages() { 
     this.setState({ loading: true }) 
     fetchMessagesFromApi() 
      .then(() => { 
       this.setState({ loading: false }) 
      }) 
      .catch(() => { 
       this.setState({ loading: false }) 
      }) 
    } 

    renderFooter() { 
     return this.state.loading ? <View><Text>Loading...</Text></View> : null 
    } 

    render() { 
     return <ListView 
      renderRow={message => <Message message={message}/>} 
      dataSource={this.state.dataSource} 
      renderFooter={this.renderFooter.bind(this)} 
      onEndReached={this.loadMoreMessages.bind(this)} 
      onEndReachedThreshold={10} 
      scrollEventThrottle={150} /> 
    } 
}