当 onEndReached 调用时，React Native (Redux) FlatList 跳转到列表顶部

Question

我在 ReactNative 中有一个 FlatList，它从 API 中提取文章列表。当滚动到达列表末尾时，会从 API 中拉出另一页文章，并将其附加到 Redux reducer 中的文章列表。

FlatList 设置为：

render() {
    return(
    <FlatList data={this.props.articles.articles} // The initial articles list via Redux state
        renderItem={this.renderArticleListItem} // Just renders the list item.
        onEndReached={this.pageArticles.bind(this)} // Simply calls a Redux Action Creator/API
        onEndReachedThreshold={0}
        keyExtractor={item => item.id.toString()}/>
   )};

Redux 的“文章”状态对象使用 React Redux 连接函数映射到组件。相关的减速器（为简洁起见删除了一些项目）看起来像：

/// Initial 'articles' state object
const INITIAL_STATE = {
    articles: [],
    loading: false,
    error: '',
    pageIndex: 0,
    pageSize: 10
};

export default(state = INITIAL_STATE, action) => {
switch(action.type){
    // The relevant part for returning articles from the API
    case ARTICLES_SUCCESS:
        return { ...state, loading: false, articles: state.articles.concat(action.payload.items), 
            pageIndex: action.payload.pageIndex, pageSize: action.payload.pageSize}
   default:
       return state;
   }
}

有效载荷是一个简单的对象——文章包含在action.payload.items数组中，有效载荷中还有其他分页信息（对这个问题并不重要）。

API 返回正确数据后一切正常。

问题是当滚动到达 FlatList 的末尾时，API 被调用，新文章被很好地拉出并附加到 this.props.articles 状态对象和 FlatList，但 FlatList 跳转/滚动回列表中的第一项。

我认为问题可能在于我如何在 Redux reducer 中返回状态，但我不确定为什么。

是否使用concat正确的方法返回附加了新文章的新状态？

Answer 1

您需要添加到 listItem 样式高度和宽度。冻结和跳跃可能是因为列表试图计算所有项目的大小，即使它们不显示。

您可以在以下位置找到答案：https ://github.com/facebook/react-native/issues/13727