如何显示带背景的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})

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

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

如果this.state.isLoading为真，则会显示活动指示。