时间戳

首页 > 解决方案 > React Native - React-Navigation 之外的全局屏幕

javascript - React Native - React-Navigation 之外的全局屏幕

问题描述

在我的 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 之外来实现。但我愿意接受任何可以帮助我实现预期目标的建议。

标签： javascriptreactjsreact-nativereduxreact-navigation

解决方案

您可以使用条件来呈现 GlobalScreen 或 MainNavigator。

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

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

推荐阅读