我如何显示带有背景的 ActivityIndi​​cator 弹出窗口

Question

Api 处理程序和 hitapi 是我的方法我想在调用 hitapi 方法时显示加载所以请建议我如何为带有背景的 ActivityIndi​​cator 创建弹出窗口

class ApiHandler {


  hitapi(url,data,method) {

  }

}

const api = new ApiHandler();
export default api;

正在加载组件：

 <View style={styles.container}>

     <ActivityIndicator
      animating
      color="#fff"
     size="large"
     style={styles.activityIndicator}
   />

   </View>

// Stylesheet for ActivityIndicator
const styles = StyleSheet.create ({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 70
  },
  activityIndicator: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: 80
  }
})

Answer 1

首先使用 属性 isLoading 初始化状态，如：

state = {
  isLoading: false
}

然后在您的服务启动时将其状态更改为 true。

this.setState({isLoading: true})

并在收到来自位置服务器的响应后将其设置为 false，无论响应成功还是失败。

this.setState({isLoading: false})

现在在 render 方法中用你的代码替换这段代码：

<View style={styles.container}>
  {this.state.isLoading ? (
    <ActivityIndicator
      animating
      color="#fff"
      size="large"
      style={styles.activityIndicator}
    />
  ) : null}
</View>

如果this.state.isLoading为真，将显示Activity指标。