React Native - глобальный экран вне React-Navigation

Question

В своем приложении React Native я использую Redux для управления глобальным состоянием приложения. Вот как выглядит мой рендер App.js:

render() {
   return (
     <Provider store={store}>
       <MainNavigator />
     </Provider>
   );
}

, где <MainNavigator /> экспорт createAppContainer(createBottomTabNavigator({ ...my panel names })) и <Provider ... /> импортируется из react-redux.

Все работает просто отлично. Тем не менее, я хотел бы иметь «глобальный» экран, который не зависит от моего навигатора. Я хотел бы, чтобы он монтировался все время сразу после запуска приложения и отображался поверх основного навигатора или скрывался с помощью Redux.

В качестве примера я стремлюсь создать что-то вроде музыкального экрана в Spotify и SoundCloud, который всегда монтируется при просмотре всего приложения. Или в качестве другого примера - экран видео на YouTube, который служит той же цели, что и предыдущие примеры.

Я попробовал следующее в моем App.js:

render() {
   return (
     <Provider store={store}>
       <GlobalScreen />
       <MainNavigator />
     </Provider>
   );
}

Однако это разделило бы мое приложение на две половины, где в верхней половине экрана отображается компонент <GlobalScreen />, а в нижней половине - компонент <MainNavigator />.

Как мне получить «глобальный» экран, независимый от React Navigation, который может наложить его или скрыть с помощью Redux?

P.S. Я не уверен, что этого можно достичь, если экран находится за пределами React Navigation. Но я открыт для любых предложений, которые могут помочь мне достичь желаемой цели.

Answer 1

Вы можете использовать условное отображение для отображения либо GlobalScreen, либо MainNavigator.

{someConditionBasedOnDataFromStore ? (
  <GlobalScreen/>
):(
  <MainNavigator/>
)

Возможно, вы хотите использовать эту логику внутри компонента, который подключается к хранилищу, чтобы получить данные для вашего условного выражения.