AWS Amplify Authenticator React Native Tab Bar Navigation 白屏而不是渲染我的应用程序

Question

我最近将我的应用程序从 AppAuth 切换到使用 AWS Amplify for React Native 进行身份验证，并尝试将 AWS Amplify Authenticator 集成到我的应用程序中。如文档中所述，我将 Authenticator 包裹在现有应用程序的主要应用程序组件周围，以确保用户只能在登录时查看应用程序。

一切都按预期工作 - 弹出登录屏幕，我可以成功登录。登录后，我可以在调试器中看到仅在登录后呈现的组件被调用并执行所有后台任务设计，我还可以从 amplify 获取 authState 和 authData，我需要进一步在我的应用程序中保持授权状态并获取访问令牌以执行 API 调用。听起来一切正常，但有一个问题 - 登录时，我的用户界面不可见 - 只有一个空白的白色屏幕。所以我假设 Authenticator 以某种方式阻止我的应用程序渲染或在我的应用程序顶部放置一个白色层。

编辑：好的，我现在了解了更多详细信息 - 只有在我的应用程序中使用 TabNavigator 时才会出现问题。如果我在没有 TabNavigator 的情况下直接包含我的组件之一，它就可以工作。 AWS Amplify 和 React Navigation Tab Navigation 之间是否存在已知的不兼容性？

感谢和最好的问候 智能家居制造商

Answer 1

好的，以后遇到这个问题的每个人都可以 - 已经解决了。

问题在于默认情况下为 AWS 放大身份验证器的容器设置了以下样式表属性：

container: {
        ...
        alignItems: 'center',
        justifyContent: 'space-around',
        ...
    },

您必须实际删除它们，或者如果您无法删除它们，请将它们设置为默认值：

container: {
            ...
            alignItems: 'stretch',
            justifyContent: 'flex-start',
            ...
        },

这很神奇 - 一旦我更改了这些样式表属性，Tab Navigator 就会出现 :)