React Native：平面清单问题

Question

我的平面列表的问题是，当我滚动到底部并调用onEndReached时，它使我回到列表的顶部。 预期的行为将是保持滚动距离，然后添加项目。这些项目是在我的情况下添加的，但是就像我说的那样，它使我回到了列表的顶部。这是我的代码：

postList.js

    import * as React from 'react';
import { Component } from 'react';
import { View, Image, FlatList, ListView, Text } from 'react-native';
import { connect } from 'react-redux';
import { fetchData } from './actions';
import { emptyData } from './actions';

class PostsList extends Component {
    constructor() {
        super();
        this.position = 0;
    }

    componentWillMount() {
        this.props.emptyData();
        this.props.fetchData(this.props.tabId, 0, this.props.dateFilter, this.position);
    }

    componentWillReceiveProps(newProps) {
        if (newProps.dateFilter !== this.props.dateFilter || newProps.tabId !== this.props.tabId) {
            this.position = 0;
            this.props.emptyData();
            this.props.fetchData(newProps.tabId, 0, newProps.dateFilter, this.position);
        }
    }

    handleLoadMore = () => {
        this.position += 10;
        if (this.props.posts.data.total === this.props.posts.data.posts.length) {
            console.log("ALL LOADED")
            return
        }
        console.log("POSITION", this.position)
        this.props.fetchData(this.props.tabId, 0, this.props.dateFilter, this.position);

    };

    renderRow({ item }) {
        return (
            <View>
                <Text>{item._id}</Text>
                <Image style={{ width: 200, height: 400 }} source={{ uri: item.image }} />
                <Text>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</Text>
            </View>
        );
    }

    render() {
        return (
            <View>
                <FlatList
                    data={this.props.posts.data.posts}
                    renderItem={this.renderRow}
                    onEndReached={this.handleLoadMore}
                    keyExtractor={item => item._id}
                    onEndReachedThreshold={0.5}
                    extraData={this.props.posts.data.posts}
                />
            </View>
        )
    }
}

const mapStateToProps = state => {
    return {
        posts: state.dataReducer,
        tabId: state.tabId,
        dateFilter: state.dateFilter
    }
}

const mapDispatchToProps = dispatch => {
    return {
        fetchData: (type, filter, dateFilter, position) => dispatch(fetchData(type, filter, dateFilter, position)),
        emptyData: () => dispatch(emptyData())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(PostsList)

home.js

import * as React from 'react';
import { Component } from 'react';
import { View, Text, Dimensions, StyleSheet } from 'react-native';
import  PostsList  from '../../postsList';
import * as actions from "../../actions";
import {connect} from 'react-redux';
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';

const FirstRoute = () => (
  <View>
    <PostsList/>
  </View>
);

const initialLayout = {
  height: 0,
  width: Dimensions.get('window').width,
};

class Home extends Component {
  constructor() {
    super();
    this.state = {
      isData: true,
      index: 0,
      routes: [
        { key: 'first', title: 'Todos' },
        { key: 'second', title: 'Encontrados' },
        { key: 'third', title: 'Perdidos' },
        { key: 'four', title: 'Adopción' },
        { key: 'five', title: 'Seguidos' },
      ]
    };

  }

  _renderTabBar = props => (
    <TabBar
      {...props}
      scrollEnabled
      indicatorStyle={styles.indicator}
      style={styles.tabbar}
      tabStyle={styles.tab}
      labelStyle={styles.label}
    />
  );

  _renderScene = SceneMap({
    first: FirstRoute,
    second: FirstRoute,
    third: FirstRoute,
    four: FirstRoute,
    five: FirstRoute
  })

  _handleIndexChange = index => {
    this.props.selected_tab(index);
    this.setState({
      index,
    });
  }


  render() {
    return (

      <TabView
        navigationState={this.state}
        renderTabBar={this._renderTabBar}
        renderScene={this._renderScene}
        onIndexChange={this._handleIndexChange}
        initialLayout={initialLayout}
      />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  tabbar: {
    backgroundColor: '#3f51b5',
  },
  tab: {
    width: 120,
  },
  indicator: {
    backgroundColor: '#ffeb3b',
  },
  label: {
    color: '#fff',
    fontWeight: '400',
  },
});

export default connect(null, actions)(Home);

home.js中的问题是我对所有5个选项卡使用相同的组件，可能会导致问题。

如果您需要更多代码，请询问。谢谢。