React-NativeのListViewの最後にアクティビティインジケータを表示

Question

ユーザーが最後に達したときにアクティビティインジケータをListViewの最後に追加する方法を探しています。 。私は、ListViewの後にインジケータを追加することができますが、それは常に表示されます。

Answer 1

これは、AリストビューのonEndReached小道具を使用することで実現できます。最後に達すると、ローダーをレンダリングできます。私の場合は、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} /> 
    } 
}