react-native(리액트 네이티브) component - RefreshControl

react-native(리액트 네이티브) component - RefreshControl

import React, {Component} from 'react';

import {ScrollView, View, RefreshControl} from 'react-native';

export default class RefreshableList extends Component {

constructor(props) {

super(props);

this.state = {

refreshing: false,

};

}

_onRefresh = () => {

this.setState({refreshing: true});

fetch("https://newsapi.org/v2/top-headlines?country=us&apiKey=<your_API_Key>").then(() => {

this.setState({refreshing: false});

});

}

render() {

return (

<ScrollView

refreshControl={

<RefreshControl

refreshing={this.state.refreshing}

onRefresh={this._onRefresh}

tintColor="#ff0000"

title="Loading..."

titleColor="#00ff00"

colors={['#ff0000', '#00ff00', '#0000ff']}

progressBackgroundColor="#ffff00"

/>

}

>

<View style={{ height: 200, backgroundColor: 'blue' }} />

<View style={{ height: 200, backgroundColor: 'pink' }} />

<View style={{ height: 200, backgroundColor: 'blue' }} />

<View style={{ height: 200, backgroundColor: 'pink' }} />

<View style={{ height: 200, backgroundColor: 'blue' }} />

<View style={{ height: 200, backgroundColor: 'pink' }} />

<View style={{ height: 200, backgroundColor: 'blue' }} />

<View style={{ height: 200, backgroundColor: 'pink' }} />

<View style={{ height: 200, backgroundColor: 'blue' }} />

<View style={{ height: 200, backgroundColor: 'pink' }} />

<View style={{ height: 200, backgroundColor: 'blue' }} />

<View style={{ height: 200, backgroundColor: 'pink' }} />

</ScrollView>

);

}

}