在获取响应之前,如何在react native中显示加载器

在我的react本机应用程序中,我将在componentdidmount中填充数据。但是,在我得到数据之前会有一些延迟,所以我想在那之前显示加载程序。为此,我使用活动指示器。

我的密码

    import {
      Switch,
      ScrollView,
      StyleSheet,
      Text,
      Image,
      View,
      TouchableOpacity,
      ActivityIndicator
    } from 'react-native';

        class AccordionView extends Component {
          state = {
            activeSections: [],
            newData: []
          };


             _renderContent = section => {
                return (
                  <View style={styles.content}>
                    <Text>{section.content}</Text>
                  </View>
                );
              };
        }

   render() {
       if (!this.state.newData) {
          return (
            <ActivityIndicator
              animating={true}
              style={styles.indicator}
              size="large"
            />
          );
        }
else if (this.state.newData.length === 0){
   return <Text>No records found!!</Text> 
}
else{
    return (
              <Accordion
                sections={this.state.newData}
                activeSections={this.state.activeSections}
                renderSectionTitle={this._renderSectionTitle}
                renderHeader={this._renderHeader}
                renderContent={this._renderContent}
                onChange={this._updateSections}
              />
            );
          }
        }
}

CSS

indicator: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 80
      }

我的新数据在API调用后有更新的响应,因此我正在做类似的事情,但是在获取数据之前,我在页面加载上看不到任何指示器/加载程序。有人能告诉我如何实现这一点吗?提前谢谢。