AWS Amplify Auth / react-navigation：認証状態にアクセスする方法は？

私の中で反応させ、ネイティブモバイルアプリケーション、私が使用して私のユーザーを認証したいAWS Amplifyソフトウェア認証をして使用して、画面間のナビゲーションが管理するナビゲーションに反応します。私はすべてを「本によって」実装しようとしました。つまり、ドキュメントに従って、私のアプリは概念的に次のようになります。

// import statements skipped

class FirstTabScreen extends React.Component {
  render = () => {
    {/* access some data passed in screenProps */}
    const someData = this.props.screenProps.someData;
    {/* TODO: how to access AWS Amplify auth data here ?!? */}
    {/* this.props contains screenProps and navigation objects */}
    console.log("this.props: ", this.props);
    {/* this.props.authState is undefined */}
    console.log("this.props.authState: ", this.props.authState);
    return <View><Text>First Tab - some data: {someData}</Text></View>
  };
}

class SecondTabScreen extends React.Component {
  render = () => {
    const otherData = this.props.screenProps.otherData;
    return <View><Text>Second Tab - other data: {otherData}</Text></View>
  };
}

const AppNavigator = createBottomTabNavigator({
  FirstTab: { screen: FirstTabScreen },
  SecondTab: { screen: SecondTabScreen },
});

const AppContainer = createAppContainer(AppNavigator);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      someData: null,
      otherData: null,
    };
  }

  componentDidMount = () => {
    this.setState({ someData: 'some data', otherData: 'other data' });
  };

  render = () => {
    return (
      <Authenticator>
        <AppContainer
          screenProps={{
            someData: this.state.someData,
            otherData: this.state.otherData,
          }}
        />
      </Authenticator>
    );
  };
}

export default App;

上記のコードサンプルは、いくつかの重要な詳細をスキップしています。完全なエキスポスナックを作成しました。

AWS AmplifyAuthenticatorはアプリケーションをラップし、認証データを組み込みコンポーネントで利用できるようにしthis.props.authStateます。ドキュメントを参照してください。

私の問題は、この認証データにアクセスする方法がわからないことです。たとえばFirstTabScreen、次のようthis.propsにscreenPropsなりnavigationます。そのコンポーネントでは、containsとobjectsですが、this.props.authStateですundefined。とAppContainerとAppNavigatorの間にAuthenticator及び例えばFirstTabScreen、私が小道具として認証データを渡すか、他の手段によってそれらを輸送する方法を見ていません。

さらに、すべてのデータをscreenProps;のすべての組み込みコンポーネントに渡すだけです。これは機能しますが、すべての画面にすべてのデータが必要なわけではありません。実際に必要なデータのみを渡すにはどうすればよいですか？ルートにパラメーターを渡すことについては知っていますが、そこにあるすべてのコードサンプルには、ハンドラーでのButton使用this.props.navigation.navigate(...)がありonPressます。これらの画面にはボタンがなく、ボタンも必要ありません。結局のところ、別のタブに移動するのは、下部のタブナビゲーションバーのタブの目的ですか？！？

誰かが親切に私のためにこれにいくつかの光を当てることができますか？