如何在提供的组件上实现这种依赖（react-native-pull-to-refresh），尤其是带有 fetchPopularMovies 的部分？答案

【问题标题】：How to implement this dependency ( react-native-pull-to-refresh) on the provided component, particularly the part with fetchPopularMovies?如何在提供的组件上实现这种依赖（react-native-pull-to-refresh），尤其是带有 fetchPopularMovies 的部分？
【发布时间】：2018-07-27 14:24:46
【问题描述】：

// @flow
import React, { Component } from 'react';
import { FlatList, View, StatusBar } from 'react-native';
import { bindActionCreators } from 'redux';
import type { Dispatch as ReduxDispatch } from 'redux';
import { connect } from 'react-redux';
import { fetchPopularMovies } from '../../actions/PopularMovieActions';
import MovieCard from '../../components/movieCard/MovieCard';
type Props = {
  fetchPopularMovies: Function,
  popularMovies: Object,
  navigation: Object,
}
class ListOfPopularContainer extends Component<Props> {
  componentDidMount() {
    this.props.fetchPopularMovies();
  }
  render() {
    const { popularMovies, navigation } = this.props;
    return (
      <View>
        <StatusBar
          translucent
          backgroundColor="transparent"
          barStyle="light-content"
        />
        <FlatList
          data={popularMovies}
          keyExtractor={item => item.title}
          renderItem={({ item }) => (
            <MovieCard navigation={navigation} card={item} />
          )}
        />
      </View>
    );
  }
}
const mapStateToProps = state => ({
  popularMovies: state.movies.popularMovies,
});
const mapDispatchToProps = (dispatch: ReduxDispatch): Function => (
  bindActionCreators({ fetchPopularMovies }, dispatch)
);
export default connect(mapStateToProps, mapDispatchToProps)(ListOfPopularContainer);

如何将它与 this.props.fetchPopularMovies() 一起使用？有没有办法将它们结合起来，如果你知道，有任何例子或一些经验，请不要害羞就这个问题提供一些意见。我不会在这里做的主要事情是当有人拉下屏幕时刷新屏幕。

【问题讨论】：

为什么不在你的 FlatList 上使用 'refreshing' 和 'onRefresh'？
我必须使用 react-native-pull-to-refresh。

标签： javascript react-native promise

【解决方案1】：

您可以在 node_module/react-native-pull-to-refresh/PullToRefreshView 中移除 android 和 ios 上的函数 _delay()，然后调用函数 _endLoading() this.props.fetchPopularMovies() 成功后

_handleOnRefresh() { // remove delay
   this.props.onRefresh()
}

// your component 
import PTRView from 'react-native-pull-to-refresh'
...

class ListOfPopularContainer extends Component<Props> {

   refresh = () => {
      this.props.fetchPopularMovies().then({
         this.PTRView._endLoading()// call end loading
   }}

   render() {
      const { popularMovies, navigation } = this.props;
      return (
         <View>
           <StatusBar
             translucent
             backgroundColor="transparent"
             barStyle="light-content"
           />
           <PTRView
             style={{ backgroundColor: '#F5FCFF' }}
             onRefresh={this.refresh}
             ref={c => this.PTRView = c}
           >
             <FlatList
               data={popularMovies}
               keyExtractor={item => item.title}
               renderItem={({ item }) => (
                 <MovieCard navigation={navigation} card={item} />
           )}
             />
           </PTRView>
         </View>
      )
   }
}

【讨论】：