React 本机导航新手：showInAppNotification 上的全屏宽度？

Question

我正在使用 react-native-navigation 通过 'showInAppNotification' 显示错误通知下拉菜单。

我尝试使用以下方式设置下拉框的样式：

{
  backgroundColor: colorRed,
  flex: 1,
  alignSelf: 'stretch',
}

我无法让盒子服从 flex 调用。它保持为通知内文本的宽度。

也就是我得到的是这样的：

而我想要的是：

（第二个是通过将硬宽度设置为 999 来实现的，但这不是一个令人满意的解决方案）

因此，根据我对 React Native 样式表逻辑的有限理解，我假设我在通知上方有一个固定宽度的父元素。除了我没有。它被直接调用（好吧，除非我缺少某种注入的 showInAppNotification 组件）到我的 Provider HOC 中，它看起来像这样：

<Provider store={store}>
  <ErrorBoundary>
    {children}
  </ErrorBoundary>
</Provider>

为了确认 ErrorBoundary 是全屏宽度，我在错误边界上添加了一个 backgroundColor: green。它以预期的宽度返回，如下所示：

对可能发生的事情有什么想法吗？如前所述，我是 React Native 的新手，我可能遗漏了一些明显的 w/regards 来灵活逻辑，但我怀疑这是一个 React-Native-Navigator 通知问题，我希望其他人有运行进入。任何想法表示赞赏。

Answer 1

您可以将 React Native 的 Dimensions class 导入您的组件并使用它来设置宽度，而不是给您的宽度一个硬编码值。

因此，您的代码可能如下所示：

import { ...., Dimensions } from 'react-native';

const { width } = Dimensions.get('window');

const styles = {
    notification : {
        backgroundColor: colorRed,
        width,
        alignSelf: 'stretch'
    }
}

React 本机导航新手：showInAppNotification 上的全屏宽度？

React native navigation newbie: Fullscreen width on a showInAppNotification?

flexbox

react-native

react-native-navigation