2017-10-22 24 views
0

The React Native docsリアクト - ネイティブのAPIをフェッチため、次のコードを示しています。反応ネイティブのフェッチAPIでサーバーの応答を待っている間にアクションを実行するにはどうすればよいですか?

function getMoviesFromApiAsync() { 
    return fetch('https://facebook.github.io/react-native/movies.json') 
    .then((response) => response.json()) 
    .then((responseJson) => { 
     return responseJson.movies; 
    }) 
    .catch((error) => { 
     console.error(error); 
    }); 
} 

私が探している何がfetchがサーバーを呼び出している間にロード・スクリプトのようなものを置く場所、以下の非のようなものです作業コード:

function getMoviesFromApiAsync() { 
    return fetch('https://facebook.github.io/react-native/movies.json') 
    .whileWating(() => { 
     // This is the type of thing I want to put into the fetch 
     console.log('Waiting for the server response.') 
    }) 
    .then((response) => response.json()) 
    .then((responseJson) => { 
     return responseJson.movies; 
    }) 
    .catch((error) => { 
     console.error(error); 
    }); 
} 

答えて

2

これは通常状態を更新する方法です。これと同じように:

フェッチ:あなたのrenderメソッドで次に

this.setState({isLoading: true}); 
fetch(url) 
.then((response.json())) 
.then((responseJson) => this.setState({isLoading: false})); 

このような何か:

if (this.state.isLoading){ 
    return this.myLoadingView(); 
} else { 
    return this.myViewWithCompletedData() 
} 

をフェッチが完了すると、状態が更新されるとRNは、再には十分にスマートになりますあなたの意見を表現する。