在当前呈现的组件React Native上显示ActivityIndi​​cator

Question

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

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>
    )
  }
}

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

我的问题：在FirebaseController中this.state.loading为真时，有没有办法在导航组件上方渲染ActivityIndi​​cator？我已经尝试将控制器内的渲染设置为

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

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

Answer 1

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