Question

在我的本机应用程序中，我正在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
      }

我的newData在api调用之后具有更新的响应，因此我正在做类似上面的事情，但是直到获取数据后我的页面加载上才看不到任何指标/加载器。有人可以让我知道如何实现这一目标吗？预先感谢。

Answer 1

newData是一个空数组，![]的计算结果为false。使您的newData最初具有一些虚假的值，例如null或undefined

我如何在响应本机中显示加载器，直到获取响应

1 个答案: