React本机ListView组件自动运行onEndReached功能,尽管我的滚动仍在顶部

React本机ListView组件自动运行onEndReached功能,尽管我的滚动仍在顶部,listview,react-native,Listview,React Native,我使用React Native ListView组件,但我不知道为什么它会自动运行onedCached函数,尽管滚动仍在顶部 我希望的是,当滚动转到我的设备底部时,然后运行onEndReached函数。但在下面的代码中,当我转到页面时,它将连续运行onEndReached函数 下面是我的组件 class MovieList extends React.Component { constructor(props) { super(props); this.state = {

我使用React Native ListView组件,但我不知道为什么它会自动运行onedCached函数,尽管滚动仍在顶部

我希望的是,当滚动转到我的设备底部时,然后运行onEndReached函数。但在下面的代码中,当我转到页面时,它将连续运行onEndReached函数

下面是我的组件

class MovieList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      movies: [],
      loaded: false,
      count: 10,
      start: 0,
      total: 0
    };

    this.dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2
    });

    this.REQUEST_URL = 'https://api.douban.com/v2/movie/top250';

    this.fetchData();

  }

  requestURL(
    url = this.REQUEST_URL,
    count = this.state.count,
    start = this.state.start
  ) {
    return (
      `${url}?count=${count}&start=${start}`
    );
  }

  fetchData() {
    fetch(this.requestURL())
      .then(response => response.json())
      .then(responseData => {
        let newStart = responseData.start + responseData.count;
        this.setState({
          movies: responseData.subjects,
          loaded: true,
          total: responseData.total,
          start: newStart,
        });
      })
      .done();
  }

  renderMovieList(movie, sectionId, rowId, highlightRow) {
    return (
      <View>
        <View style={styles.item}>
          <View style={styles.itemImage}>
            <Image
              source={{uri: movie.images.large}}
              style={styles.image}
             />
          </View>
          <View style={styles.itemContent}>
            <Text style={styles.itemHeader}>{movie.title}</Text>
            <Text style={styles.itemMeta}>
              {movie.original_title} ( {movie.year} )
            </Text>
            <Text style={styles.redText}>
              {movie.rating.average}
            </Text>
          </View>
        </View>
      </View>
    );
  }

  loadMore() {
    fetch(this.requestURL())
      .then(response => response.json())
      .then(responseData => {
        let newStart = responseData.start + responseData.count;
        this.setState({
          movies: [...this.state.movies, ...responseData.subjects],
          start: newStart
        });
      })
      .done();
  }

  onEndReached() {
    console.log(
      `reached start:${this.state.start}, total:${this.state.total}`
    );

    if (this.state.total > this.state.start) {
      this.loadMore();
    }
  }

  renderFooter() {
    if (this.state.total > this.state.start) {
      return (
        <View
          style={{
            marginVertical: 20,
            paddingBottom: 50,
            alignSelf: 'center'
          }}
        >
          <ActivityIndicatorIOS />
        </View>
      );
    } else {
      return (
        <View
          style={{
            marginVertical: 20,
            paddingBottom: 50,
            alignSelf: 'center'
          }}
        >
          <Text
            style={{
              color: 'rgba(0, 0, 0, 0.3)'
            }}
          >no more load :D</Text>
        </View>
      );
    }
  }

  render() {
    if (!this.state.loaded) {
      return (
        <View style={{backgroundColor: '#eae7ff', flex: 1}}>
          <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <ActivityIndicatorIOS
              size="large"
              color="#6435c9"
            />
          </View>
        </View>
      );
    }
    return (
      <View style={{backgroundColor: '#eae7ff', flex: 1}}>
        <ListView
          renderFooter={this.renderFooter.bind(this)}
          pageSize={this.state.count}
          onEndReached={this.onEndReached.bind(this)}
          initialListSize={this.state.count}
          dataSource={this.dataSource.cloneWithRows(this.state.movies)}
          renderRow={this.renderMovieList.bind(this)}
        />
      </View>
    );
  }
}
class MovieList扩展了React.Component{
建造师(道具){
超级(道具);
此.state={
电影:[],
加载:false,
计数:10,
起点:0,
总数:0
};
this.dataSource=new ListView.dataSource({
行已更改:(行1,行2)=>行1!==行2
});
此.REQUEST\u URL='0https://api.douban.com/v2/movie/top250';
这是fetchData();
}
请求URL(
url=this.REQUEST\u url,
count=this.state.count,
start=this.state.start
) {
返回(
`${url}?计数=${count}&start=${start}`
);
}
fetchData(){
获取(this.requestURL())
.then(response=>response.json())
.然后(响应数据=>{
让newStart=responseData.start+responseData.count;
这是我的国家({
电影:responseData.subjects,
是的,
总计:响应数据总计,
开始:newStart,
});
})
.完成();
}
renderMovieList(电影、节ID、行ID、highlightRow){
返回(
{movie.title}
{movie.original_title}({movie.year})
{movie.rating.average}
);
}
loadMore(){
获取(this.requestURL())
.then(response=>response.json())
.然后(响应数据=>{
让newStart=responseData.start+responseData.count;
这是我的国家({
电影:[…this.state.movies,…responseData.subjects],
开始:新闻开始
});
})
.完成();
}
onEndReached(){
console.log(
`到达起始:${this.state.start},总计:${this.state.total}`
);
如果(this.state.total>this.state.start){
这是loadMore();
}
}
renderFooter(){
如果(this.state.total>this.state.start){
返回(
);
}否则{
返回(
不再加载:D
);
}
}
render(){
如果(!this.state.loaded){
返回(
);
}
返回(
);
}
}

谢谢你的帮助

我不知道为什么,但我从其他方面得到了一些帮助

我删除了ScrollView组件,因为有人告诉我ListView包含ScrollView,然后给ListView组件一个
style={{{flex:1}}
,它就工作了