AWS Amplify Authenticator React Native 选项卡栏导航白屏而不是呈现我的应用程序

Question

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

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

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

谢谢和最诚挚的问候智能家居制造商

Answer 1

大家好运行以后再解决这个问题 - 已解决。

问题是以下样式表属性，这些属性默认设置为 AWS amplify 身份验证器的容器：

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

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

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

这很神奇 - 一旦我更改了这些样式表属性，选项卡导航器就出现了:)

AWS Amplify Authenticator React Native 选项卡栏导航白屏而不是呈现我的应用程序

AWS Amplify Authenticator React Native Tab Bar Navigation white screen instead of rendering my app

javascript

ios

react-native

react-navigation

aws-amplify