在当前渲染的组件 React Native 上显示 ActivityIndicator答案

【问题标题】：Show ActivityIndicator over current rendered component React Native在当前渲染的组件 React Native 上显示 ActivityIndicator
【发布时间】：2018-04-14 05:19:38
【问题描述】：

我有一个组件，它根据身份验证状态确定当用户打开应用程序时要返回哪个组件。

class MyApp extends Component {
  render() {
    if (!this.props.authenticated) {
      return <AuthenticationContainer />
    }
    return (
      <View style={{ flex: 1 }}>
        <StatusBar backgroundColor={this.props.online ? Colors.blue : Colors.gray} />
        <Navigation />
        <FirebaseController />
        <PushNotificationController />
      </View>
    )
  }
}

当用户通过身份验证时，它会返回几个包装在单个视图中的不同组件。 Navigation 组件包含来自react-navigation 的 DrawerNavigator，它基本上是整个应用程序。我还与导航组件一起返回了几个“控制器”，我在 componentDidMount() 上注册了一些侦听器，但在它们的渲染函数中返回 null。在 FirebaseController 组件中，我有时会在后台运行一些逻辑。在此期间，我将状态变量loading 设置为true，并在逻辑完成后将其设置回false。

我的问题：有没有办法在 FirebaseController 中的 this.state.loading 为真时在 Navigation 组件上方呈现 ActivityIndicator？我尝试将控制器内的渲染设置为

render() {
    if (this.state.loading) {
      return <ActivityIndicator style={{ zIndex: 1 }} />
    }
    return null
  }

和其他一些变化，但没有成功。我不完全确定这甚至是可能的。

【问题讨论】：

ActivityIndicator 期望显示一个 animating 道具。你用过吗？
默认为true，我没有设置为false
您是否尝试使用 View 包装它并将样式的位置属性设置为绝对？
我发誓我尝试了这个和许多其他方法，现在它正在工作。将其包裹在视图中并设置位置：'absolute'，顶部：0，左侧：0，右侧：0，底部：0，justifyContent：'center'。谢谢，请随时发布作为答案
没关系。即使是错字也可能导致问题。很高兴它现在可以工作

标签： reactjs react-native

【解决方案1】：

解决方案是将<ActivityIndicator/>（或您想要返回的任何内容）包装在View 中，并将视图的样式设置为style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center' }}。

【讨论】：