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覆盖或隐藏自身？

PS 。我不确定是否可以通过将屏幕置于React Navigation之外来实现。但是我愿意接受任何可以帮助我实现预期目标的建议。

Answer 1

您可以使用条件渲染GlobalScreen或MainNavigator。

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

您可能希望此逻辑在连接到商店的组件中以获取您的条件数据。