AWS Amplify Authenticator 和 React Native Navigation Container 如何在两者之间切换

Posted 2023-03-15

【中文标题】AWS Amplify Authenticator 和 React Native Navigation Container 如何在两者之间切换

【英文标题】：AWS Amplify Authenticator and React Native Navigation Container how to switch between the two

【发布时间】：2021-04-24 21:00:13

【问题描述】：

我正在使用 React Native 构建应用程序，并且正在使用 AWS 身份验证器进行登录。

最初包括组件在内的所有组件都在内部，我使用“props.onStateChage('destination')”命令来浏览不同的组件。一切都很好。但我认为从长远来看，将所有组件都放在“Authenticator”中并不是一个好主意，所以我切换到下面的部分。

登录后，使用我正在尝试将状态切换到 中的组件的组件。但是 会引发错误，因为它不是 。

原文：

const App = () => 

  return (
      <Authenticator 
          usernameAttributes="email"
          hideDefault=true
          authState="signIn"
          > 
          <SignUp/>
          <SignIn/>
          <Home/>
          <ConfirmSignUp/>
          <ConfirmSignIn/>
          <ForgotPasswordSend/> 
        </Authenticator>
  )

切换后：

Amplify.configure(awsconfig);

console.disableYellowBox = true;

const Stack = createStackNavigator();



const App = () => 

  return (
    <NavigationContainer>
      

      <Stack.Navigator>
      <Authenticator 
          usernameAttributes="email"
          hideDefault=true
          authState="signIn"
          > 
          <SignUp/>
          <SignIn/>
          <ConfirmSignUp/>
          <ConfirmSignIn/>
          <ForgotPasswordSend/> 
        </Authenticator>
    
        <Stack.Screen
          name="Home"
          component = Home
        />
        
      </Stack.Navigator>

    </NavigationContainer>

  )

问题摘要：如何在两者之间进行交流？

个人尝试： 我尝试将其移动到它自己的组件中，该组件中包含原始代码，然后制成 但现在我收到一个错误，即“props.onStateChange”不是函数。它在早些时候工作。

这是我一直在关注的教程的链接，以获得更多见解，该系列中有多个视频，但这是其中一个指向正确方向的视频： https://www.youtube.com/watch?v=ZoghLcZjVCE

【问题讨论】：

你的问题有问题——没有问题。

@JohnH 中的所有内容都在工作，而 Home 组件也在其中。为了改变状态，我使用了 props.onStateChange('Pagename',);用目标页面名称代替 Pagename。 会因为 而引发错误，所以我试图弄清楚如何从 中的 SignIn 组件中按下按钮将状态更改为 中的主屏幕StackNavigator>.

@JohnH 我不确定发生了什么，但由于某种原因，现在它告诉我 props.onStateChange 在过去工作时不是命令。这是我遵循的教程的链接，如果它提供了一些清晰度。 youtube.com/watch?v=qZen4RTUnqY

就您的问题提出具体问题可以帮助其他人提供帮助您的答案。如果您已经解决了部分或全部问题，请考虑使用该信息编辑您的问题。

【参考方案1】：

更新：我已从 切换到第二个 ，我将其命名为 ，现在可以在两者之间转移。

身份验证器仍然使用“Auth”调用进行登录，但将身份验证器封装在“Navigator”标签中更容易。欲了解更多信息，请查阅：嵌套导航器，或点击此链接。 https://reactnavigation.org/docs/nesting-navigators/