AWS Белый экран Amplify Authenticator React Native Tab Bar Navigation вместо рендеринга моего приложения

Question

Недавно я переключил свое приложение с AppAuth на аутентификацию с помощью AWS Amplify для React Native и попытался интегрировать AWS Amplify Authenticator в свое приложение. Как описано в документации, я обертываю Authenticator вокруг моего основного компонента приложения уже существующего приложения, чтобы убедиться, что пользователь может просматривать приложение только после входа в систему.

Все работает, как ожидалось - вход в систему появляется экран, и я могу успешно войти в систему. После входа я вижу в отладчике, что компоненты, которые будут отображаться только после входа в систему, вызываются и выполняют все фоновые задачи, как задумано, и я также могу получить authState и authData из усилить то, что мне нужно в дальнейшем для удержания состояния авторизации в моем приложении, и получить токен доступа для выполнения вызовов API. Звучит так, как будто все работает как надо, но есть одна проблема - при входе в систему мой пользовательский интерфейс не виден - есть только пустой белый экран. Итак, я предполагаю, что Authenticator каким-то образом либо блокирует мое приложение от рендеринга, либо помещает белый слой поверх моего приложения.

РЕДАКТИРОВАТЬ: Хорошо. TabNavigator внутри моего приложения. Если я включу один из моих компонентов напрямую, без TabNavigator, он заработает. Есть ли известная несовместимость между AWS Amplify и React Navigation Tab Navigation?

С уважением и наилучшими пожеланиями, The Smart Home Maker

Answer 1

Хорошо для всех, кто столкнется с этой проблемой в будущем - исправлено.

Проблема заключалась в следующих атрибутах таблицы стилей, которые установлены по умолчанию для контейнера AWS ampify аутентификатора:

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

Вы должны удалить их или, если вы не можете удалить их, установите для них значения по умолчанию:

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

Это magi c - как только я изменил эти атрибуты таблицы стилей , появился Tab Navigator :)