NearBy

ちょっぴり役に立つ情報を発信しているブログです。

ReactNativeでPullToRefresh

はじめに

今回は、ReactNativeでPullToRefreshを実装する方法について書きます。

FlatListを用います。FlatListの記事についてはこちらの記事で書きました。

www.near-by.design

実装

コードは前回と同様のコードを使います。 f:id:zawank0:20180411085910p:plain refreshingonRefresh というpropsを追加しています。

class FeedSample extends Component {
  constructor(props) {
    super(props);
    this.renderFeedList = this.renderFeedItem.bind(this);
    this.onFeedPress = this.onFeedPress.bind(this);
  }
  componentWillMount() {
    this.props.fetchFeeds(); 
  }
  onFeedPress(url) {
    Actions.Webview({ url });
  }
  renderFeedItem({ item }) {
    return (
      <FeedItem
        item={item}
        onPress={() => this.onFeedPress(item.link)}  
      />
    );
  }
  render() {
    return (
       <View style={styles.container}>
        <FlatList
          data={this.props.feeds}
          renderItem={this.renderFeedItem}
          keyExtractor={item => item.id}
          refreshing={false} // Added.
          onRefresh={() => this.props.fetchFeeds()} // Added.
        />

        />
      </View>
    );
  }
}

onRefresh propsを追加して関数を渡すようにします。

今回は、this.props.fetchFeeds をわたして、Pullした時に最新の情報をAPIから取得するようにしています。

onRefresh を追加した時は、refreshing propsも必ず渡す必要があります。

trueにすると、Indicatorが表示されるようになりますが、最初に表示させる必要はないので、falseにしています。

終わりに

シンプルにPullToRefreshの処理がかけたかと思います。 AndroidでもiOSでも動きます!

今回は以上ですー。