React Navigation +自定义通知用户界面

Question

我有一个带有以下框架的本机应用程序

• react-native：0.44.2
• react-navigation：1.0.0-beta.11
• redux：3.6.0

ReactNavigation结构

• 根导航器（堆栈导航器）
  • Tab导航器
    • 标签详细信息（堆栈导航器）
  • 登录屏幕（全屏幕堆栈导航器）

我正在尝试根据应用程序的设计创建“应用内自定义通知用户界面”。我无法使用正常的“本地/推送通知”。由于我使用的是redux，因此我创建了一个处理通知操作的自定义中间件。

当从应用程序的任何位置触发通知操作时，此redux中间件会捕获它并将通知传递给我的NotificationUI组件。这一切都运作良好。

我的问题是如何显示此NotificationUI（使用ReactNavigation）？

我需要从根注入NotificationUI（可以这么说），这样我就不需要为应用程序的每个“屏幕”添加NotificationUI。

处理该问题最优雅的方式是什么？

我尝试用NotificationUI组件创建一个更高阶的组件，并在其中“包装”“Root navigator”，但结果如下所示。 （通知是底部的红色条）。它堆叠在一起。但我希望一个人在后台，另一个人在前台。

Answer 1

这是我用代码解决的方法：

  <Provider store={store}>
    <React.Fragment>
      <SystemNotificationComponent />
      <RootStack />
    </React.Fragment>
  </Provider>
);

是的，SystemNotificationComponent当然应该定位为“绝对”！

这将在任何导航屏幕顶部显示SystemNotificationComponent的内容。