expo - 如何使用 React Navigation 6 和 expo 制作透明模态

Question

我刚刚从 React 导航 5 升级到 6 并查看了 the doc for transparent modals .不幸的是，我无法让之前的屏幕显示在模态下。相反，我得到一个灰色背景。

我用我的代码制作了一个点心来展示我的结果:https://snack.expo.dev/@divone/transparent-modal-not-working

我做错了什么？我似乎拥有文档中列出的所有元素才能正常工作。

我在 expo SDK 43 的托管工作流中。

Answer 1

这对我有用。我在指定背景颜色时遇到了很多麻烦，因为它没有忽略透明度并以纯色完全覆盖背景。似乎您需要为一个组指定此信息，而不是为特定屏幕指定此信息。

您还分配了 typescript 编译器认为对 React Navigation 6 无效的属性。检查您的文本编辑器是否在您键入时显示编译器错误。

        <Stack.Group
          screenOptions={{
            presentation: "transparentModal",
            contentStyle: { backgroundColor: "#40404040" },
          }}
        >
          <Stack.Screen key="ModalScreen" name="ModalScreen" component={ModalScreen} />
        </Stack.Group>