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

Question

// @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);

How to use it with the this.props.fetchPopularMovies() ? Is there some way to combine them, if you know, have any example or some experience with it please don't be shy to give some input on this problem. The main thing I wont to do here is refreshing the screen when someone pulls it down.

Answer 1

You can remove funtion _delay() on both android and ios in node_module/react-native-pull-to-refresh/PullToRefreshView , then call funtion _endLoading() after this.props.fetchPopularMovies() success

_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>
      )
   }
}