APIコールへのネイティブの無制限スクロール・パス・パラメーター

Question

私は次のコード を使用していますが、正常に動作しますが、DB内のすべてのスレッドを一度にフェッチします（数千のスレッドを持つことができます）。私は画面の下までスクロールするたびに25のスレッドをレンダリングします。
これをどのように統合し、パラメータ呼び出しをAPI呼び出しに渡すことができますか？

import React, { Component } from 'react'; 
import { AppRegistry, ListView, View, Text } from 'react-native'; 
import axios from 'axios'; 

export default class Component5 extends Component { 
    constructor() { 
    super(); 
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 
    this.state = { 
     userDataSource: ds, 
    }; 
    } 
    componentDidMount() { 
    this.fetchUsers(); 
    } 
    fetchUsers() { 
    axios.get('https://stageapi6.devmn.net/api/v1/forums/threads?topic_id=2418&per=25&page=2', { 
     headers: { 
     'client-id': '*****' 
     } 
    }) 
    .then(response => this.setState({ userDataSource: this.state.userDataSource.cloneWithRows(response.data) })); 
    } 

    renderRow = (user) => { 
    console.log(user); 
    return (
     <View> 
     {user.map(u => 
      (<View key={u.thread.id} style={styles.containerStyle}> 
      <Text style={styles.whatchedStyle}>{u.thread.num_posts}</Text> 
      <View> 
       <Text style={[styles.textStyle, styles.topicStyle]}>{u.thread.topic_name}</Text> 
       <Text style={[styles.textStyle, styles.nameStyle]}>{u.thread.name}</Text> 
      </View> 
      </View>)) 
     } 
     </View> 
    ); 
    } 

    render() { 
    return (
     <ListView 
     style={{ backgroundColor: '#8B008B' }} 
     dataSource={this.state.userDataSource} 
     renderRow={this.renderRow.bind(this)} 
     /> 
    ); 
    } 
} 

const styles = { 
    containerStyle: { 
    backgroundColor: 'purple', 
    shadowColor: '#000', 
    shadowOffset: { width: 0, height: 2 }, 
    shadowOpacity: 0.1, 
    shadowRadius: 2, 
    elevation: 1, 
    borderBottomWidth: 1, 
    borderBottomColor: '#8B008B', 
    padding: 10, 
    flexWrap: 'wrap', 
    alignItems: 'flex-start', 
    flexDirection: 'row', 
    }, 
    textStyle: { 
    color: '#FFFFFF' 
    }, 
    topicStyle: { 
    fontWeight: 'bold', 
    }, 
    nameStyle: { 
    fontSize: 20 
    }, 
    whatchedStyle: { 
    color: 'purple', 
    backgroundColor: '#FFFFFF', 
    padding: 10, 
    marginRight: 20 
    } 
}; 

AppRegistry.registerComponent('Component5',() => Component5); 

Answer 1

あなたは、リストビューのonEndReached機能を使用することができます。すべての行がレンダリングされ、リストがonEndReachedThreshold下にスクロールされたときに呼び出されます。ネイティブスクロールイベントが提供されます。