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

Question

Api Handler 和 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})

现在用你的内部渲染方法替换这段代码：

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

如果this.state.isLoading 为真，将显示活动指示器。