React Native，无限滚动传递参数给 API 调用答案

【问题标题】：React Native, infinite scrolling passing parameters to the API callReact Native，无限滚动传递参数给 API 调用
【发布时间】：2017-04-20 12:01:42
【问题描述】：

我有以下代码，它工作正常，但它一次获取数据库中的所有线程，（我可以有超过数千个线程）我想每次滚动到屏幕底部时渲染 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);

【问题讨论】：

标签： listview reactjs react-native infinite-scroll

【解决方案1】：

您可以使用 ListView 的 onEndReached 功能。当所有行都被渲染并且列表被滚动到底部的 onEndReachedThreshold 内时，它将被调用。提供原生滚动事件。

【讨论】：