はじめに
今回は、ReactNativeでPullToRefreshを実装する方法について書きます。
FlatListを用います。FlatListの記事についてはこちらの記事で書きました。
実装
コードは前回と同様のコードを使います。
refreshing と onRefresh という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でも動きます！
今回は以上ですー。
