React Nativeでデータがフェッチされるまでローダーをレンダリングする方法

Question

非同期要求でデータをフェッチしています。私はデータを表示する前にAPI要求が完了するのを待つ必要があることを知っています。残念ながら、データをロードするのを待つローダーを作成する方法がわかりません。私は反応するのが新しいので、それを実装するのにも役立つことがあれば、それは素晴らしいでしょう！ここに私の現在のコードである：ActivityIndicator使用して単純な例

import React, { Component, PropTypes } from 'react'; 
import { View, Text, ListView, StyleSheet, TouchableHighlight} from 'react- native'; 
import Header from '../Components/Header'; 
import Api from '../Utility/Api'; 


export default class CalendarPage extends Component { 

constructor(props) { 
super(props); 
} 

async componentWillMount() { this.setState(
    {data: await Api.getDates()}, 

    ) 
} 

    render() { 
    return (
     <View style={{flex: 1}}> 
     <Header pageName="Calendar" navigator={this.props.navigator}/> 
     <View style = {{flex:9}}> 
      <View> 
       { this.state.data.days[0].items.map((item) => (
       <View> 
        <Text>{item.summary}</Text> 
        <Text>{item.start.dateTime}</Text> 
        <Text>{item.description}</Text> 
       </View> 
      ))} 
      </View> 
     </View> 
     </View> 
    ); 
    } 

}

Answer 1

-

インポートActivityIndicator

import { View, Text, ListView, StyleSheet, TouchableHighlight, ActivityIndicator} from 'react- native'; 

はdata状態を設定はnullに

constructor(props) { 
    super(props); 
    this.state = { 
     data: null 
    } 
    } 

は条件付きレンダリング

render() { 
    if (!this.state.data) { 
     return (
     <ActivityIndicator 
      animating={true} 
      style={styles.indicator} 
      size="large" 
     /> 
    ); 
    } 

    return (
     <View style={{flex: 1}}> 
     <Header pageName="Calendar" navigator={this.props.navigator}/> 
     .... 
     .... 
     </View> 
    ); 
    } 
} 

インジケータスタイル

const styles = StyleSheet.create({ 
    indicator: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    height: 80 
    } 
});