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

Question

我刚刚从 React 导航 5 升级到 6，并查看了透明模式的文档。不幸的是，我无法在模式下显示上一个屏幕。相反，我得到的是灰色背景。

我用我的代码做了一份小吃来展示我的结果：https ://snack.expo.dev/@divone/transparent-modal-not-working

我究竟做错了什么？我似乎已经拥有文档中列出的所有元素，使其可以正常工作。

我正在使用 expo SDK 43 的托管工作流程。

Answer 1

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

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

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