如何渲染加載器直到在React Native中獲取數據

我通過異步請求獲取數據。我知道我需要在顯示數據之前等待api請求完成。不幸的是，我不知道如何創建一個加載器來等待數據加載。我是新的反應，所以如果我也可以得到實施它的幫助，那太棒了！這裏是我當前的代碼：如何渲染加載器直到在React Native中獲取數據

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> 
    ); 
    }

}

來源

2017-03-17 JerryVonJingles

我覺得你可以做兩點了回報，如果沒有狀態，然後返回裝載機否則返回的數據加載。我認爲你還沒有設置你的初始狀態。 –

使用ActivityIndicator一個簡單的例子 -

進口ActivityIndicator

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

設置data狀態爲空

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 
    } 
});

來源

2017-03-17 00:59:53 vinayr

如何渲染加載器直到在React Native中獲取數據

回答

相關問題